<div id="readability-page-1" class="page"><div><h2 id="들어가며">들어가며</h2>
useContext를 안 쓰다가 컴파운드로 컴포넌트를 만들면서 종종 사용하기 시작했다. context api는 친숙하지 않고 전체 렌더링 이슈 있어서 뭔가 찝찝했는데 이번 기회에 context를 최적화 해보장!
<h3 id="예제">예제</h3>
<img src="https://velog.velcdn.com/images/dongha1992/post/19d7e2f5-3fe9-4144-84b0-32cbd6bdd814/image.gif">
위와 같은 앱이 있다고 가정하자. 주요 컴포넌트는 두 개다.
<ul>
<li>
dog name을 value로 받는 input
<ul>
<li>value가 있으면 화면에 value를 렌더링한다. </li>
</ul>
</li>
<li>
사용자가 지정한 만큼 cell을 보여주는 grid
<ul>
<li>update 버튼으로 cell을 새로 렌더링한다.</li>
<li>checkbox를 통해 grid를 계속 새롭게 렌더링한다.</li>
<li>row, col을 수정하여 UI를 업데이트 한다. </li>
<li>cell을 클릭하면 랜던함 숫자로 cell을 업데이트 한다. </li>
</ul>
</li>
</ul>
<img src="https://velog.velcdn.com/images/dongha1992/post/a8186a07-145d-4267-adb4-ca6a1e336930/image.png">
두 컴포넌트는 Provider의 children이고
<img src="https://velog.velcdn.com/images/dongha1992/post/af69339f-6e8c-4773-8879-876a679f7d07/image.png">
Provider는 state와 dispatch를 value로 준다.
가장 큰 렌더링 비용을 사용하는 Grid는 React.memo를 한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1d3de8e4-f9d6-4eee-8898-c53b7cf2ec5f/image.png">
이제 강제 리렌더링을 해보자!
<img src="https://velog.velcdn.com/images/dongha1992/post/43621cb5-5461-4748-bab9-7d39c6a55115/image.gif">
보는 것처럼 컴포넌트에 React.memo를 해줬음에도 모든 컴포넌트가 리렌더링 됐다. 
그 이유는 provider에 props로 주는 value가 참조객체이기 때문에 컴포넌트는 매번 새로운 props로 인지하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/8425934a-b3ea-43ab-b4df-cc1da8d5d9d4/image.png">
위 value를 useMemo로 메모해준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/10726be4-0963-4f7c-a289-0b46b8cbeb2a/image.png">
그리고 다시 테스트 해보면 
<img src="https://velog.velcdn.com/images/dongha1992/post/4916ae55-194d-4abe-8ce7-868fa6d7fafc/image.gif">
value의 변화가 없을 때, 모든 컴포넌트가 리렌더링이 되지 않는 것을 확인할 수 있다!
<img src="https://velog.velcdn.com/images/dongha1992/post/55eea916-255a-43ff-adcc-3bd1f19d78b0/image.png">
<h3 id="further">further</h3>
이제 <code>Grid</code> 컴포넌트에서 state 변화가 일어났다고 가정하자. 
가령, cell을 클릭하여 cell에 적힌 숫자를 변경한다고 하자. 
<img src="https://velog.velcdn.com/images/dongha1992/post/09665d1c-941c-4193-89d8-1f13bf73cbb9/image.gif">
위에 보이는 것처럼 업데이트가 된 Cell은 하나인데 전체가 리렌더링 된 것을 볼 수 있다. 
memo를 했음에도 이러한 현상이 일어난 이유는 생각해보면 간단하다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c144b298-3c9e-4dad-8059-c7ee9983b3ba/image.png">
useMemo의 의존성 배열에 있는 state 즉, dogName, grid 중 grid가 변경되었으니 새로운 value 를 만든 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/ad6f74e0-94b8-4dc9-8700-24f0e5e5d3d8/image.png">
<code>&lt;Cell&gt;</code> 컴포넌트의 부모인 <code>&lt;Grid&gt;</code> 컴포넌트는 실질적으로 state 변경과 상관이 없음에도 리렌더링이 된다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/c8651328-5da5-41ac-b45d-1c2f59387e5e/image.png">
실제 UI 업데이트가 일어나는 하나의 Cell만 리렌더링을 시켜야 한다!
가장 쉬운 방법은 context를 분리하는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/1201b1d3-d166-4cdc-8773-7caeb873e4dc/image.png">
dispatch context를 따로 만들고 
<img src="https://velog.velcdn.com/images/dongha1992/post/5727ba9e-0a44-48ba-a249-4202dc64af8e/image.png">
state, dispatch 를 필요한 곳에만 준다!
<img src="https://velog.velcdn.com/images/dongha1992/post/e643e29c-8742-41f3-9874-732c54c3fea2/image.png">
그리고 이전과 동일하게 cell을 클릭해서 리렌더링을 발생시키면
<img src="https://velog.velcdn.com/images/dongha1992/post/424cc0d4-b897-42ee-82f1-d7753b56f4a8/image.gif">
모든 컴포넌트가 렌더링 되지 않음을 알 수 있다!
context 분리 전
<img src="https://velog.velcdn.com/images/dongha1992/post/9751a0ab-f374-4a3e-a382-30cf863912cf/image.png">
context 분리 후
<img src="https://velog.velcdn.com/images/dongha1992/post/6fddbaef-bce1-4dbc-af75-b01f23e22fd3/image.png">
<h3 id="further-1">further</h3>
아직 이상한 부분이 있다. 분명 하나의 cell을 클릭했는데 상관없는 몇몇 cell들이 리렌더링 되는 것이다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/55fd6ac3-1b9b-4bfd-a544-042bb6aaadec/image.gif">
아래 보이는 것처럼 memo는 되고 있지만 리렌더링 되는 cell들이 있다. (처음엔 버그인 줄 알았다.)
<img src="https://velog.velcdn.com/images/dongha1992/post/e9a4521e-0cc3-4ede-af85-9a4cf1892179/image.png">
그 이유는 <code>&lt;Cell&gt;</code> 컴포먼트가 state를 다루는 데 있는데, <code>&lt;Cell&gt;</code> 컴포먼트는 <code>&lt;Cell&gt;</code> 는 직접 state를 받고 있는 일과 받은 state를 통해 cell을 렌더링 하는 일. 두 가지 일을 하고 있기 때문이다. (이 부분의 이해가 확실하지 않음)
이를 해결 하기 위해서는 로직을 분리하여 새로운 컴포너틑를 만들어주는 것이다. 그리고 props를 통해 전달하여 React.memo가 제대로 작동할 수 있게 해주는 것이다.
<img src="https://velog.velcdn.com/images/dongha1992/post/fb1fca67-5253-42eb-a789-3938418f3232/image.png">
먼저 <code>&lt;Cell&gt;</code> 컴포넌트에서 provider에서 받은 state와 관련된 로직을 지우고 <code>&lt;CellImpl&gt;</code>로 컴포넌트 이름을 변경한다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/01d5872e-f605-4a29-a944-d3277af441f8/image.png">
아래와 같이 <code>&lt;Cell&gt;</code> 컴포넌트를 만들고 state를 받고 필요한 로직을 거쳐 cell을 <code>&lt;CellImpl&gt;</code>에게 props로 준다. 
<img src="https://velog.velcdn.com/images/dongha1992/post/27adfc80-b6dc-404a-a0d7-fbc5de29b270/image.png">
그리고 다시 테스트를 해보면
<img src="https://velog.velcdn.com/images/dongha1992/post/cb06eca6-2fef-4f40-a795-ae82a71ba1c3/image.png">
<code>&lt;CellImpl&gt;</code> 는 렌더링 되지 않았고
<img src="https://velog.velcdn.com/images/dongha1992/post/81866b31-6920-4b1d-9374-a61a76283fa6/image.png">
<code>&lt;Cell&gt;</code> 는 렌더링되었다. 
즉, react element를 반환하는 <code>&lt;CellImpl&gt;</code>의 불필요한 렌더링을 막으면서 최적화한 것이다. (이거 짱이다...)
<img src="https://velog.velcdn.com/images/dongha1992/post/8161b279-2d24-4e91-b0e6-ad6e03e1725a/image.png">
참고
<ul>
<li>epic-react 강의</li>
<li><a href="https://kentcdodds.com/blog/how-to-use-react-context-effectively">https://kentcdodds.com/blog/how-to-use-react-context-effectively</a></li>
</ul></div></div>

삶도 재입학이 되나요?

들어가며
useContext를 안 쓰다가 컴파운드로 컴포넌트를 만들면서 종종 사용하기 시작했다. context api는 친숙하지 않고 전체 렌더링 이슈 있어서 뭔가 찝찝했는데 이번 기회에 context를 최적화 해보장!
예제
위와 같은 앱이 있다고 가정하자. 주요 컴포넌트는 두 개다.
dog name을 value로 받는 input
value가 있으면 화면에 value를 렌더링한다. 
사용자가 지정한 만큼 cell을 보여주는 grid
update 버튼으로 cell을 새로 렌더링한다.
checkbox를 통해 grid를 계속 새롭게 렌더링한다.
row, col을 수정하여 UI를 업데이트 한다. 
cell을 클릭하면 랜던함 숫자로 cell을 업데이트 한다. 
두 컴포넌트는 Provider의 children이고
Provider는 state와 dispatch를 value로 준다.
가장 큰 렌더링 비용을 사용하는 Grid는 React.memo를 한다. 
이제 강제 리렌더링을 해보자!
보는 것처럼 컴포넌트에 React.memo를 해줬음에도 모든 컴포넌트가 리렌더링 됐다. 
그 이유는 provider에 props로 주는 value가 참조객체이기 때문에 컴포넌트는 매번 새로운 props로 인지하는 것이다. 
위 value를 useMemo로 메모해준다. 
그리고 다시 테스트 해보면 
value의 변화가 없을 때, 모든 컴포넌트가 리렌더링이 되지 않는 것을 확인할 수 있다!
further
이제 Grid 컴포넌트에서 state 변화가 일어났다고 가정하자. 
가령, cell을 클릭하여 cell에 적힌 숫자를 변경한다고 하자.
위에 보이는 것처럼 업데이트가 된 Cell은 하나인데 전체가 리렌더링 된 것을 볼 수 있다. 
memo를 했음에도 이러한 현상이 일어난 이유는 생각해보면 간단하다. 
useMemo의 의존성 배열에 있는 state 즉, dogName, grid 중 grid가 변경되었으니 새로운 value 를 만든 것이다. 
<Cell> 컴포넌트의 부모인 <Grid> 컴포넌트는 실질적으로 state 변경과 상관이 없음에도 리렌더링이 된다. 
실제 UI 업데이트가 일어나는 하나의 Cell만 리렌더링을 시켜야 한다!
가장 쉬운 방법은 context를 분리하는 것이다. 
dispatch context를 따로 만들고 
state, dispatch 를 필요한 곳에만 준다!
그리고 이전과 동일하게 cell을 클릭해서 리렌더링을 발생시키면
모든 컴포넌트가 렌더링 되지 않음을 알 수 있다!
context 분리 전
context 분리 후
further
아직 이상한 부분이 있다. 분명 하나의 cell을 클릭했는데 상관없는 몇몇 cell들이 리렌더링 되는 것이다. 
아래 보이는 것처럼 memo는 되고 있지만 리렌더링 되는 cell들이 있다. (처음엔 버그인 줄 알았다.)
그 이유는 <Cell> 컴포먼트가 state를 다루는 데 있는데, <Cell> 컴포먼트는 <Cell> 는 직접 state를 받고 있는 일과 받은 state를 통해 cell을 렌더링 하는 일. 두 가지 일을 하고 있기 때문이다. (이 부분의 이해가 확실하지 않음)
이를 해결 하기 위해서는 로직을 분리하여 새로운 컴포너틑를 만들어주는 것이다. 그리고 props를 통해 전달하여 React.memo가 제대로 작동할 수 있게 해주는 것이다.
먼저 <Cell> 컴포넌트에서 provider에서 받은 state와 관련된 로직을 지우고 <CellImpl>로 컴포넌트 이름을 변경한다. 
아래와 같이 <Cell> 컴포넌트를 만들고 state를 받고 필요한 로직을 거쳐 cell을 <CellImpl>에게 props로 준다. 
그리고 다시 테스트를 해보면
<CellImpl> 는 렌더링 되지 않았고
<Cell> 는 렌더링되었다. 
즉, react element를 반환하는 <CellImpl>의 불필요한 렌더링을 막으면서 최적화한 것이다. (이거 짱이다...)
참고
epic-react 강의
https://kentcdodds.com/blog/how-to-use-react-context-effectively

useContext 최적화

댓글