React 배열에 key가 존재하는 이유

쾌락코딩님의 글을 보고 제식대로 정리한 것입니다.

 

React를 사용하신 분이라면 map을 이용해 리스트를 표현할 때 key값을 설정안했을 때의 노란색 경고창을 본 경험이 있을 것이다. 그곳에 항상 index값을 넣고 사용하긴 했지만 정작 index값이 필수적으로 필요한지 정확히 알고 사용하진 않았다.

 

 

마침 일방적 담당 쌤인 종원쌤이 나에게 되물었다. "왜 key값이 필요한지 아나요?"

 

5초 고민하고 나온 답은

 

key값을 통해 list에 유일 키를 부여하고 변경 시에 효율적인 탐색을 통해 값을 변경하기 위해서 입니다.

 

거의 맞았다고 하셨지만 sibing 방식을 추가해서 설명해야 100점이라고 했다. 좀 더 자세히 알아보자.

 

React는 VDom을 사용한다. 그래서 map을 통해 요소를 그릴 때 처음에는 렌더링을 하지만 두번째 부터는 변경된 부분만 감지해서 해당 부분만 효율적으로 리렌더링된다. 그렇기에 우리는 key값을 통해 변경해야할 부분만 catch해야 효율적인 render가 된다.

 

요소가 추가되었을 때 index로 추가한다면 리렌더링 하려는 대상의 key값이 +1 된체로 추가가 된다. 그렇기에 기존의 dom과 vdom을 비교하여 새로 추가된 요소만 렌더링 시킨다.

 

요소가 변경되었을 때도 추가와 마찬가지로 해당 key값을 찾아 비교후 렌더링 대상을 정한다.

 

key값으로 index값을 추천하지 않는 상황이 있는데 이는 중간에 요소가 추가되거나 삭제 되었을 경우다. 중간 key 값이 바뀌면 그 이후의 key값이 전부 -1씩 된다. 그러므로 비 효율적인 렌더링이 일어나기에 index보다는 유니크한 id를 key 값으로 설정해주는 것이 좋다.

 

그렇다면 sibling 방식은 무엇일까??

 

영어 뜻은 형제,자매란 뜻으로 리스트로 연결된 요소끼리 key값을 공유하는 것을 뜻한다. 위에 설명한 내용이 sibling 방식을 뜻한다.

 

생각보다 어려운 개념은 아니었다. 하지만 이 내용을 알고 개발하는 것과 모르고 하는 것은 다르기에 알고 개발하는 개발자가 되도록 하자.