React : Key Props를 사용하는 이유

[Hah-nna]

Key Props

Key Props란?

Key Props는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕기 위해 사용하고, 요소에 안정적인 고유성을 부여하기 위해 배열 내부의 요소에 지정해야함 때문에 key는 중복되지 않는 유니크한 값이어야하고, 보통 데이터의 id를 key로 많이 사용함

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Key Props가 필요한 이유

리액트는 화면이 바뀌기 전 가상 DOM과 화면이 바뀐 후의 구조가 담겨있는 가상DOM을 가지고 있음 이 둘을 비교해 바뀐 부분이 있으면 실제 DOM에 바뀐 부분만을 적용해 바꾸어 줌 하지만 key가 없다면 바뀐 부분을 식별해줄 식별자가 없으므로 모든 요소가 다르다고 생각해 필요없는 리렌더링이 발생함

예를 들면 todo라는 배열에 새로운 todo라는 아이템이 추가된다고 가정해봄 key가 없다면 리액트는 아래와 같이 작동함

1. 바뀌기 전 가상 DOM과 바뀐 후 보여주어야 할 가상 DOM의 모든 요소를 하나하나 비교함
2. key가 없기 때문에 이전 요소와 동일한지 아닌지 식별할 수 없어 리액트는 이전 요소들과 다르다고 판단함
3. 실제 DOM에서 모든 요소를 리렌더링함

=> 필요없는 리렌더링이 발생함!

만약 key가 있다면 아래와 같이 작동할 것임

1. 바뀌기 전 가상 DOM과 바뀐 후 보여주어야할 가상 DOM에서 바뀐 요소의 key를 발견함
2. 해당 key가 있는 요소만 렌더링함(전체 렌더링x)

key를 사용해 변경된 부분만 업데이트할 수 있어 전체 렌더링을 방지하고 성능을 개선할 수 있음 !

[Hah-nna]

Key Props가 필요한 이유는 내일 추가 예정