3. 개발 - 기본 구조

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를 안 쓰고도 앱이 잘 굴러갈 것 같다. -> 일단 이 방법으로 리팩토링을 진행