React | List & Key

Key를 사용해보자

리액트를 사용해 인스타그램 클론 중 댓글을 Component로 나눠주고, 댓글 기능을 구현하는 중에 map()을 사용해보게 되었다.
Main 컴포넌트에서 댓글 input에 댓글을 입력하면 id와 text를 state로 관리해주고 그 안의 배열을 Comment 컴포넌트에 props로 전달해준다.
Comment 컴포넌트는 받아온 배열을 array.map()을 사용해 리턴해주게 되고 댓글이 입력될 때마다 변하는 상태값을 통해 화면은 렌더링된다.

리액트에서 이런 식으로 리스트를 출력할 때, 각 항목에 key를 포함해주어야한다고 콘솔에 에러가 뜨게 되는데. key는 리스트에 포함해야하는 특수한 문자열 속성이다. 만약 백에서 받아오는 데이터가 있다면 key값은 고유해야하기 때문에 id라던가, 다른 값을 사용해주겠지만 현재 구현하는 상태에서는 단순하게 index 값으로 처리해줄 수 있기 때문에 숫자로 처리해주었다.

import React from 'react';

// Comment.js
export default function Comment(props) {
  const commentList = props.comment;
  const comments = commentList.map((comment, index) => (
    <div key={index} className="comment-wrapper">
      <span className="comment-id">{comment.user}</span>
      <span className="comment-text">{comment.text}</span>
      <button className="delete-button" type="button">
        X
      </button>
    </div>
  ));
  return <div className="feed-comment__add">{comments}</div>;
}

// Main.js
function Main() {
  const [commentInput, setCommentInput] = useState('');
  const [comments, setComment] = useState([]);

  const handleChange = event => {
    setCommentInput(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    setComment(
      comments.concat({
        user: 'haesoo',
        text: commentInput,
      })
    );
    setCommentInput('');
  };
  
  return (  
   <div>
      {/* ...do something 어쩌구 저쩌구 */}
    <Comment className="feed-comment__add" comment={comments} />
   </div>
  )
  

Key 란 무엇일까?

공식문서

key 는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고, 요소에게 안정적인 고유성을 부여하기 위해 배열 내부의 요소에 지정해주어야 한다.
따라서 key를 선택하는 좋은 방법은 고유하게 식별가능한 문자열을 사용하는 것이고, 대부분은 데이터의 ID값을 key로 사용한다.
그리고 나처럼 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다고 한다.

고유성 ?

공식문서
DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.
자식의 끝에 요소를 추가하면 순서대로 변경에 대한 확인작업이 이루어지고 잘 작동할텐데, 리스트의 맨 앞에 요소가 추가된다면 성능이 좋지 않다. 아래의 코드에서 두번째 경우는 모든 자식이 변경되기 때문에 비효율적이다.
즉, 변화한 상태값만 렌더가 발생하는 것이 아니라 모든 리스트의 요소를 다시 업데이트 해주는 것이다. 이렇게 모든 state 값에 변화가 매번 발생한다면 예상하지 못한 버그가 생겨날 수 있기 때문에 key값을 식별자로 준다.

// 성능에 문제가 없는 경우
<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

// 성능에 문제가 있는 경우
<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

이러한 문제를 해결하기 위해 Key를 제공하는데, 자식들이 가진 key를 확인해서 일치하는지 확인하기 때문에 어떤 값이 변해야하는지 알 수 있고 전체가 아닌 해당 key값에 변화가 있을 때 트리의 변환 작업이 실행되고 따라서 효율적인 작동이 가능하다.