useReducer

5. 개발 - 상태 관리 리팩토링 - useReducer

1) 기존 상태 관리 - useState 기존에는 노드들(텍스트, 이미지)의 상태를 useState를 활용해서 상태 관리했다. const [nodes, setNodes] = useState([]) 이미지 편집기에서 특정 노드의 속성을 변경하는 경우가 많은데, 이런 경우에 특정 노드를 id를 통해서 찾고 걔의 속성을 변경하는 식의 코드가 들어가야 한다. immer을 사용해서 객체, 배열의 상태 변경을 쉽게 해도 중복되는 코드의 양이 너무 많았다. setNodes(state, draft => { const target = draft.find(node => node.id === targetId) target[property] = newProperty }) 이런 코드들이 많은 곳에 중복으로 들어갔다. 2) 변경..

useReducer

정의 useState의 대체 함수이다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환 - 공식 문서 const [state, dispatch] = useReducer(reducer, initialArg, init) 특징 redux의 reducer와 비슷하게 동작한다. 또한 init에 state 생성 함수를 전달함으로써 초기화 지연이 가능하다. dispatch의 회피 - Reducer Hook에서 현재 state와 같은 값을 반환하는 경우 자식을 리렌더링, effect 발생시키지 않고 이것들을 회피 활용 브라우저 상에서 이미지를 편집하는 서비스를 개발하고 있다. 배경 이미지를 설정하고, 다른 이미지나 텍스트를 삽..