[TOAST] React.memo() 현명하게 사용하기를 읽고

https://ui.toast.com/weekly-pick/ko_20190731

 

포스팅을 읽으며, 최근 진행한 미션이 생각났다.

이번에 팀 미션으로 2주간 리액트를 학습하며, 결과물을 만들어야 하는 상황을 맞이했다.

미션과 학습을 함께 진행해야 하는 상황에서 팀원들과 어떻게 진행해야 할 지 회의를 했고, 첫 주는 리액트에 대한 학습만 하기로 결정했다. 투두리스트 자체를 바닐라로 구현했을 때, 시간이 오래 소요되는 미션이 아니니 괜찮겠다는 안일한 마인드도 있었기에 미션 기간의 절반을 통크게 학습 비용으로 설정했다.

 

하지만 여러 컬럼을 고려해야 하는 상황, 그리고 프론트엔드 끼리 작업하므로 간단한 API를 직접 구축해야 하는 상황(사실 이건 몽고로 CRUD만 구현해서 헤로쿠로 배포했기에 어려운 작업은 아니었다..)이나 드래그 앤 드랍, 협업에 대한 규칙들을 정하는 과정 등 많은 난제들이 산적해있었다.

결국 기능 구현에 급급하여 리렌더링 최적화에 대한 제대로 된 작업을 못했고, 그 결과 많은 케이스에서 불필요한 리렌더링이 발생했다.

그래서 그런지 포스팅을 더 재미있게 읽은 느낌이다!

 

내가 생각한 요점은 아래와 같다.

1. React.memo는 같은 props임에도 렌더링이 자주 발생하는 상황에 사용하기 좋다.

  - 왜? memo는 props가 동일할 때, 성능 최적화를 위해 사용하는 고차 컴포넌트이므로..

2. useState나 useReducer나 useContext등의 상태 관리를 위한 훅을 사용한다면 리렌더링이 발생하게 된다는 점

  - 1번과 같은 이유로 memo는 props의 변화에만 영향을 끼치기 때문이다. (state, context는 별개)

3. 부모 컴포넌트에서 콜백 함수를 정의해서 자식 컴포넌트에 콜백 함수를 전달하는 경우

  - useCallback을 이용하여 콜백의 인스턴스를 유지해야 한다.

  - 그렇지 않다면, 새로 정의된 함수로 인해 리렌더링이 발생하게 된다.

 

 

흥미로운 포스팅이었다 ::)