1) 상태 관리
최상위 컴포넌트에서 배경화면과 텍스트, 이미지의 상태를 관리했다. 그리고 최상위 컴포넌트의 상태를 React Context를 활용해서 하위 컴포넌트에서 useContext로 활용할 수 있게 했다.
const [background, setBackground] = useState(null)
const [nodes, setNodes] = useState([])
return (
<ImageEditorContext.Provider value={{background, nodes}}>
/// ...생략
</ImageEditorContext.Provider>
)
2) 컴포넌트 나누기
<SideMenu />
<SideFunctionTab />
<SideFunctionTabToggleButton />
<Editor/>
기능, 레이아웃을 기반으로 컴포넌트를 나눴다.
3) 보완할 점
ImageEditorContext 하나에 모든 상태들을 다 담아서 하위 컴포넌트로 전달하는데, 이러면 문제점이 하위 컴포넌트에서 useContext()를 사용하면 imageEditorContext에 들어간 value중 1개만 변경되어도 재렌더링이 일어난다. 그래서 불필요한 렌더링이 너무 많이 일어난다.
-> 어떻게 보완할까?
A. context를 여러 개로 분리해서 쓴다. 하지만 이렇게 하면 아래와 같이 좀 코드가 난잡해질 우려가 있다.
<A.Provider>
<B.Provider>
<C.Provider>
<D.Provider>
/// ...생략
</D.Provider>
</C.Provider>
</B.Provider>
</A.Provider>
그래서 얘를 따로 좀 분리해서 ImageEditorWrapper 컴포넌트로 분리해서 쓰면 괜찮을 것 같기도 하다.
B. 최상위 컴포넌트에 집중되어 있는 상태를 자식에 분배한다. 지금은 너무 위에 몰려 있어서 그런데 잘 분배하면 Context를 안 쓰고도 앱이 잘 굴러갈 것 같다. -> 일단 이 방법으로 리팩토링을 진행
'프로젝트 회고 > 이미지편집기 개발' 카테고리의 다른 글
6. 개발 - 뒤로가기(작업 취소), 앞으로 가기(복구) Z-index 조정 기능 (0) | 2022.07.20 |
---|---|
5. 개발 - 상태 관리 리팩토링 - useReducer (0) | 2022.07.18 |
4. 개발 - 편집기 주 화면 구현, 배경, 노드(이미지, 텍스트) 추가, 편집 기능 (0) | 2022.06.30 |
2. 액션 정의하기, 앱 구조와 화면 레이아웃 잡기 (0) | 2022.06.15 |
1. 요구사항 정리와 라이브러리 선정하기 (0) | 2022.06.12 |