1. Key props
동적인 배열을 렌더링하기 위해 map 메소드를 사용하여 <li> 엘리먼트 안에 요소를 하나씩 반환하고 결과를 저장하는 코드를 작성하였다.
코드를 실행하면, 이와 같이 li의 각 항목에 key를 넣어야 한다는 경고가 표시된다. 왜일까?
리액트에서 배열을 렌더링 할 때에는 key 라는 특수한 props 를 설정하고 포함해야 하기 때문이다.
💡 그렇다면 key는 어떠한 속성을 가지고 있고, 어떠한 역할을 하는가?
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
💡 왜 key를 이용하는가?
각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다. 결국은 리액트의 효율적인 렌더링을 위해서 key가 필요한 것!
2. Key를 선택하는 방법
해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것. 대부분의 경우 고유한 속성을 가진 데이터의 ID를 key로 사용한다.
고유한 ID가 없다면 map 함수를 사용 할 때 설정하는 콜백함수의 두번째 parameter에 index 를 key 로 사용하면 된다. 하지만, 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장되지 않는다. index를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것이고 컴포넌트의 state가 바뀔 수 있을 것이다.
예시
부모 컴포넌트의 일부
<ul className="add-comment">
{this.state.userComments.map((comment, id) => (
<CommentComponent commentList={comment} />
))}
</ul>자식 컴포넌트의 일부
class CommentComponent extends Component {
render() {
return (
<>
<li className="comment">
<strong>itssweetrain </strong>
{this.props.commentList}
</li>
</>
);
}
}
<li> 엘리먼트가 아니라 배열의 리스트가 담긴(ex. <ul>) 엘리먼트가 key를 가져야 한다.
3. Key의 유무에 따른 업데이트 방식
key의 유무에 따른 다르게 나오는 결과값의 예시로, 이것은 index를 사용할 경우 생길 수 있는 문제점과도 연결된다.
노드의 자식들을 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. 예를 들어, 똑같이 생성된 li의 끝에 새 엘리먼트를 추가하면, 두 트리 사이의 변경은 잘 작동할 것이다.
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>두 트리에서 차례대로 <li>first</li>, <li>second</li>가 일치하는 것을 확인하고 마지막으로 추가 된 <li>third</li>을 트리에 추가하며 업데이트 한다. 하지만, 위와 같이 구현하고 리스트의 맨 앞에 새 요소를 추가하는 경우는 성능이 좋지 않게 된다.
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>I'm the one</li>
<li>first</li>
<li>second</li>
</ul><li>first</li>와 <li>second</li> 종속 트리를 그대로 유지하는 대신 모든 자식을 변경하고, 이는 비효율적인 문제를 생성할 수 있다. 이는 배열에도 마친가지로 적용하고, 삽입과 제거를 하다보면 비효율적으로 리렌더링하게 된다.
그렇기 떄문에, key 속성을 설정해야한다. 중복되지 않는 key를 추가하여 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 따라서 수정되지 않는 기존의 값은 그대로 두고 효율적으로 원하는 곳에 내용을 삽입하거나 삭제할 수 있다.
<ul>
<li key="1">first</li>
<li key="2">second</li>
</ul>
<ul>
<li key="0">I'm the one</li>
<li key="1">first</li>
<li key="2">second</li>
</ul>key=0을 가진 엘리먼트가 새로 추가되었고, 1과 2의 key를 가진 엘리먼트는 그저 이동만 하면 된다.
고유한 key 값이 있는것이 중요하며, 만약에 배열안에 중복되는 key 가 있을 때에는 렌더링시에 오류메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어지지 않게 된다.
