📋 Key 이해하기
React에서 여러 컴포넌트 혹은 엘리먼트를 동적으로 생성할 때 반드시 고유의 key를 주도록 하고 있다.
하지만 이런 key를 사용하는 이유와 올바른 사용법을 모르고있다면 제대로 key에대해 알고있다고 할 수 없다.
이 글을 통해 React의 key에 대해 파헤쳐보자.
📌 1. key를 사용하는 이유
const arr = ["개", "고양이", "돼지", "기린"]
arr.map(el => <div>{el}<div/>)위와 같이 map 메소드를 사용해 동적으로 렌더링 했다고 가정해보자.
위와 같은 배열에 고양이와 돼지 사이에 코끼리를 삽입하게 된다면,
리렌더링을 하는 경우에 고양이와 돼지 사이에 새로운 div를 삽입하게 되는게 아닌 돼지는 코끼리로, 기린은 돼지로, 마지막에 기린이 새로 삽입되는 방식이다.
또 고양이와 돼지 사이에 코끼리가 추가된 배열에서 개를 제거하게 되면 위와 비슷한 방식으로 개는 고양이, 고양이는 돼지로 바뀌다가 마지막의 기린은 제거된다. 이것이 리스트 요소의 추가와 제거 방식이다.
즉, 키가 없다면 불필요한 리스트 요소의 변경까지 일어나게 된다는 것이다.
하지만 저 div에 키값이 있다면 어떻게 될까?
배열이 업데이트 될 때마다 변경되지 않은 값들은 그대로 두고, 원하는 부분만을 삽입 및 삭제할 수 있게 된다.
결국 리액트에서 key를 사용하는 이유는 컴포넌트나 엘리먼트의 변화를 감지하고, 효율적으로 연산하기 위해서 사용하는 것이다.
📌 2. key에 넣어야하는 값은?
리액트에서 효율적으로 연산하기위해 키값을 넣어야한다는 사실을 알았다.
그렇다면 index값을 키값으로 넣으면 되지 않을까?
하지만, 키값에는 index보단 데이터가 가지고있는 고유의 값 [ex) id] 를 넣는게 좋다. 만약 index를 넣는다면 리스트를 변경할 때 각 요소의 인덱스 또한 재배치하기 때문에 key값을 변경시켜 효율적이지 못하게 될 수 있다.
그렇기 때문에 index보다는 그 데이터의 고유한 값을 넣는것이 일반적이다.
👏