[React] Day 21 - React.memo를 사용한 컴포넌트 리렌더링 방지

➡️React.memo를 사용하여 리렌더링을 방지하여 리렌더링 성능 최적화 해주기

 

📌React.memo 함수

사용법 : React.memo(함수 명);

ex) export default React.memo(UserList);

 

CreateUser.js

수정 전

export default CreateUser;

 

수정 후

export default React.memo(CreateUser);

 

UserList.js

수정 전

export default UserList;

 

수정 후

export default React.memo(UserList);

 

이렇게 바꾸고 코드를 실행해보면, 한가지 문제가 있다는 것을 알 수 있다.

📢User 중 하나라도 수정하면 모든 User들이 리렌더링 되고, CreateUser도 리렌더링이 된다.

 - 그 이유는 무엇일까? 바로, users 배열이 바뀔때마다 onCreate, onToggle, onRemove도 새로 만들어지기 때문이다. 

이걸 최적화하고 싶다면, "함수형 업데이트"를 해주면 된다. 

📌함수형 업데이트

   - 함수형 업데이트를 하게되면, setUsers에 등록하는 콜백함수의 파라미터에서 최신 users를 참조할 수 있기때문에 deps에 users를 넣지 않아도 된다.