⚛ React key

React key란?

• Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 결정하는 식별값이다. 즉, 렌더링 과정에서 어떤 요소에 변동이 있었는지를 확인하기 위해 사용된다.

• Key값이 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하며 변화를 감지하지만,key값이 존재할 경우 이를 더욱 빠르게 알아낼 수 있다.

✔ key가 없을 경우 렌더링은 동일하게 일어나지만 console창에 키값을 가져야 한다는 경고창이 뜨게된다.

key값의 조건

• 컴포넌트 안에 실제 렌더링되는 DOM element가 아닌, 해당 컴포넌트에 key값을 배정해야 한다. 즉 map() method 내부에 존재하는 요소에게 key값을 넣어주는게 좋다. (물론 map 안에 적용 대상이 컴포넌트가 아닌, element일 경우는 key값을 부여해도 상관없다.)

• 형제 컴포넌트 사이에서만 고유한 값이어야 한다. (형제끼리는 고유하되, 전역의 범위에서는 상관없다.)

1-1. 컴포넌트 (적절함)

commentList.map(element => {return (<Child key={element.id}>)})

1-2. Child 컴포넌트 안 실제 렌더링 될 tag (적절하지 않음)

<li key="{element.id}"></li>

2. map() 대상이 컴포넌트가 아닌, DOM 요소일 경우 (적절함)

commentList2.map((element) => {
  return <li key={element.id}></li>;
});

key값을 특정 값(ex> 해당 데이터의 id)이 아닌 index값으로 하면 안되는 이유

• 새로운 컴포넌트가 추가나 삭제가 되었을 때, 렌더링이 되면서 항목의 순서에 따라 index값은 지속적으로 변하게 된다. 때문에 key값이 해당 컴포넌트의 고유의 값이 아닌, 동적인 값이 되버리므로 state값도 꼬일 뿐더러 원하지 않는 결과값 을 얻기 때문이다. 따라서 고유한 id값을 부여해주는 것을 권장한다고 한다.

Reference

• 리스트와 키

• 리액트 공식문서 - Components and Props