기본적으로 재조정에 관한 이해가 필요하다.
렌더링에 있어 key를 주지 않으면, 자식의 입장에서는 일종의 덕타이핑이 발생할 수 있다.
분명히 같은 컴포넌트인데, 순서가 바뀌었기 때문에 다르게 인식이 되는 것이다. (텍스트 콘텐트가 다르다던지)
때문에 여기서 렌더링이 잘못 일어나면 렌더링 성능이 저하되게 된다.
이를 해결하는 것이 key이다. key가 같으면 렌더링에 있어, 속성 값만 업데이트하기 때문이다.
사실 key를 주는 게 뭐 그리 대수는 아니다. 생각해보니 계층을 조작하는 데 있어 map에서 알아서 key를 넣어주기 때문이다.
그렇지만 분명 좋은 방법은 맞는 듯하다. 일단 ID가 바뀔 일이 없다. 또한, 쓸모 없는 것들을 빠르게 리액트에서 알 수 있도록 힌트를 제공하는 꼴이기 때문에, 더 적절히 사용하는 예시라고 생각하여 변경하였다.
다만... 성능 측정은 아직 되지 않아서, 리팩토링이 더 적절한 말인 것 같아 두 개 다 라벨을 붙였다.
JengYoung
commented
1 year ago
💌 설명
key를 줌으로써 재조정에 관한 힌트를 주어 렌더링 성능을 개선한다.
기본적으로 재조정에 관한 이해가 필요하다. 렌더링에 있어
key를 주지 않으면, 자식의 입장에서는 일종의 덕타이핑이 발생할 수 있다. 분명히 같은 컴포넌트인데, 순서가 바뀌었기 때문에 다르게 인식이 되는 것이다. (텍스트 콘텐트가 다르다던지)때문에 여기서 렌더링이 잘못 일어나면 렌더링 성능이 저하되게 된다. 이를 해결하는 것이
key이다.key가 같으면 렌더링에 있어, 속성 값만 업데이트하기 때문이다.사실
key를 주는 게 뭐 그리 대수는 아니다. 생각해보니 계층을 조작하는 데 있어map에서 알아서key를 넣어주기 때문이다. 그렇지만 분명 좋은 방법은 맞는 듯하다. 일단 ID가 바뀔 일이 없다. 또한, 쓸모 없는 것들을 빠르게 리액트에서 알 수 있도록 힌트를 제공하는 꼴이기 때문에, 더 적절히 사용하는 예시라고 생각하여 변경하였다.다만... 성능 측정은 아직 되지 않아서, 리팩토링이 더 적절한 말인 것 같아 두 개 다 라벨을 붙였다.
📎 관련 이슈
closes #80
💡 논의해볼 사항
📝 참고자료
https://kentcdodds.com/blog/understanding-reacts-key-prop https://ko.reactjs.org/docs/reconciliation.html
⚠️ 잠깐! 한 번 체크해주세요.