웹 페이지 성능을 개선하는 간단한 미션을 진행할 때, list에 map을 돌린 컴포넌트를 최적화 할 일이 생겼습니다.
그런데 배열의 item을 화면에 그릴 때 key도 식별가능한 값을 이용해서 item을 인식할 수 있고,
memo는 값을 저장해서 리렌더링을 막을 수 있고... 뭔가 애매한 느낌이 들었습니다.
key만 사용해도 어떤 컴포넌트가 바뀌었는지 리액트가 인식할 수 있는거 아닌가요?
memo만 사용해도 컴포넌트를 재사용 가능한 것 아닌가요?
역할을 정확히 알아야 헷갈리지 않습니다.
1. Key의 역할
쉽게 말해서 key는 dom 과 virtual dom이 diff되는 알고리즘에 영향을 줘서 key가 같다면 reconcile을 막아줍니다.
2. memo의 역할
memo는 컴포넌트의 prop을 비교해서 같다면 함수 실행부분을 저장한 값을 그대로 가져다 씁니다.
자 그럼 상황별로 보겠습니다.
1. key와 memo 둘 다 없을 때
당연히 최적화가 하나도 안 돼 있어서 리렌더링이 일어납니다.
2. key가 unique하지 않거나 없음 + memo는 있을 때
reconcile이 일어납니다. memo로 인지해야할 컴포넌트를 변경이 있다고 판단해서 다시 그리므로
저장된 값을 불러오지 않고 새 값을 사용할 것입니다.
모든 요소가 리렌더링 되면서 동시에 memo가 쓰잘데기 없이 메모리만 낭비하게 될 것 같습니다.
3. key가 unique하게 있고 memo는 없을 때
reconcile을 막아서 tree는 재사용 하겠지만, 컴포넌트 실행은 재사용을 안해서 리렌더링 되긴 할 겁니다.
4. key도 unique하게 있고, memo도 있을 때
tree상에서 reconcile도 막아서 재사용 하고, 실제 실행부에서도 재사용을 해서 리렌더링을 막아줍니다.