React 자식 요소의 리렌더링 방지 방법

[문제 상황]

리스트의 값을 .map()하여 자식 요소를 여러개 렌더링함.

리스트의 값을 하나만 변경해도 해당 원소가 아닌 다른 원소를 참조하는 모든 값,

즉, 그 리스트를 참조하는 모든 자식 요소가 리렌더링 되는 상황 발생.

memo도 적용되지 않음.

 

[원인]

'자식 요소'는 '부모 요소' 안에서 선언되어 있었고, useSate()로 관리되는 변화가 있는 '부모 요소'의 값을 직접 사용하였다.
그대로 '부모 요소' 안에 선언해둔 채로 직접 '부모 요소'의 값을 사용하지 않고 props로 받도록 수정하였는데 그래도 의미가 없었다.

 

[문제 해결]

1 .자식요소를 별도의 파일로 만들어 컴포넌트화 함.
2. 부모요소에서 해당 자식 요소를 import 함

3. 필요한 모든 부모의 값들을 props로 자식요소에 전달

=> 즉, 자식 컴포넌트가 변동이 있는 부모의 모든 값을 props로 받게 해야함.