React) Key Props를 사용하는 이유

리액트에서 동적으로 컴포넌트를 추가해주고 싶을 때 map 메소드를 주로 사용한다.

그런데 map 메소드가 순회할 때 JSX코드를 뱉어낼 때 key인자가 없다면 리액트가 개발자 도구에 경고 메시지를 출력한다.

 

그런데 왜 key props가 필요한지를 알아보자

 

이유: 렌더링 최적화

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

만약 Key가 없다면 배열에서 무언가 수정하거나 삭제하면 전체 배열을 다시 렌더링하게 된다.

그러나 Key를 넣어준다면 해당 instance만 수정하거나 삭제하여 불필요한 재렌더를 방지할 수 있다.

 

 

주의할 점: map((value, idx) => { return <div key={idx}></div> }) 처럼 2번째 인자를 key에 넣는 것도 좋지 않다.

에러를 없애기 위해 임시 방편으로 map의 2번째 인자를 활용하는 경우가 있는데, 이렇게 하면 에러는 사라질지 몰라도, 불필요한 재렌더가 반복되는 것은 막을 수 없다. 왜냐하면 특정 id를 삭제하고나면 리스트의 모든 idx값들에 변동이 생기기 때문에 모두 다시 재렌더되는 것은 똑같기 때문이다. 임시 방편으로만 사용하고, 될 수 있으면 꼭 id로 활용할 수 있는 고유값을 넣어주자.