Context를 적용하자!

git 연습도 할 겸 새로운 branch를 생성해서 작업할 거예요

Context를 사용하기 위해 TodoContext 컴포넌트를 생성합니다.

TodoList 관련 모든 컴포넌트를 관리하는 최상위 컴포넌트인 Home.jsx에서 TodoContext를 import 하고 TodoContext.Provider로 Context를 사용할 컴포넌트들을 감싸줍니다.

우선 Modal 컴포넌트 하나만 예시로 들겠습니다. Modal 컴포넌트에 전달되던 'modalHandler'를 Provider의 value 값으로 넣어줍니다.

Modal 컴포넌트로 넘어가서, Context로부터 데이터를 불러오는 useContext를 사용합니다. 그리고 TodoContext로부터 값을 불러올 것이기에 TodoContext를 인수로 넣어줍니다.

console.log를 찍어보면 modalHandler가 잘 받아와 지는 것을 확인할 수 있어요.

Home.jsx에서 Modal 컴포넌트에게 props로 전달하던 코드를 지우고,

Modal 컴포넌트에서 구조분해 할당을 통해 받아오면 끝입니다. 나머지 컴포넌트도 동일하게 적용하면 됩니다.

Context는 아래와 같은 상황에서 굉장히 유용합니다.

Home.jsx에서 TodoList에게 핸들러를 내려주고

TodoList는 핸들러를 다시 또 TodoItem에게 내려줍니다

그리고 TodoItem은 해당 값을 받아서 사용합니다.

ToddList는 핸들러를 사용하지도 않지만 계층구조 특성상 TodoItem에게 전달하기 위해서 값을 받고 다시 전달하는 것이다. 굉장히 비효율적인 구조이죠

그림으로 설명하면 왼쪽과 같은 구조에서 Context를 활용하면 오른쪽 같이 쓸 수 있는 것입니다. 훨씬 효율적이죠

Context 적용 이후, 코드도 전보다 훨씬 깔끔해진 것을 확인할 수 있습니다.

이후 브랜치를 merge 해주고 context 브랜치를 삭제하는 것으로 작업을 마무리했습니다.

최적화를 시도해 보다

Header.jsx의 경우 마운트 이후로 리렌더링이 될 필요도 이유도 없습니다. 그렇기에 React.memo를 통해 리렌더링을 방지해 줬습니다.

하지만.. 사실 최적화를 적용하는 방법을 모르겠습니다. 그냥 어떻게 접근을 하고, 어떻기 적용을 해야 하는지 전혀 감이 안 옵니다.. Header에는 적용이 되는데, TodoEditor에는 또 안되고...

최적화는 지금부터 고려하기에는 무리였을까 라는 생각도 듭니다. 당장은 기능 구현에 집중하는 것이 좋을 것 같습니다.

용로그