map 함수 적용시 key props를 부여하는 이유

🔑 key를 부여하는 이유 ❓
순서가 일정하지 않을시 각 요소에 특별한 값으로 키를 사용해야 순서를 보장받을 수 있기 때문이다. react는 단순히 앞을 하나밀고 뒤에 하나 넣으면 되지만 간단한 규칙을 모른다. 그냥 키와 값이 모두 다르니 바뀌었다고 생각할 뿐이다.

배열의 순서나 내용이 변경되지 않는다면 아무 key나 사용해도 된다.

key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할시 식별하는 것을 돕는다.

  const [inputValue, setInputValue] = useState('');
  const [commentList, setCommentList] = useState([]);

const onButtonClick = () => {
     e.preventDefault();
     if (inputValue === '') {
       return;
     }
     setCommentList(commentList => [...commentList, inputValue]);
    
  };

const Comment = props => {
  return props.commentList.map((comment, index) => (
    <li className="comment" key={index}>
      <div className="comment-left">
        <span className="comment-id">smileDay01</span>
        <span className="comment-content">{comment}</span>
      </div>
      <div className="comment-right">
        <button className="comment-like">
          <i className="fa-icon fa-regular fa-heart" />
        </button>
        <button className="comment-delete">
          <i className="fa-solid fa-trash-can" />
        </button>
      </div>
    </li>
  ));
};

내 코드. map함수에 전달되는 콜백 함수의 인수인 index값을 사용하였다. 우선 실행적인면에서는 오류가 나지 않았으나, index를 사용하면 배열이 변경될 시 리렌더링이 비효율적이라는 것을 알아낸뒤 수정해보았다. (이로인해 성능이 저하되거나 state관련 문제가 발생할 수 있다.)

 const [inputValue, setInputValue] = useState('');
 const [commentArr, setCommentArr] = useState([]);

const onFormSubmit = e => {
    e.preventDefault();
    const commentNewArr = [...commentArr];
    if (inputValue !== '') {
      commentNewArr.push({
        id: Date.now(),
        userId: 'smileDay01',
        comment: inputValue,
      });
      setCommentArr(commentNewArr);
    }
    setInputValue('');
  };

const Comment = ({ commentArr }) => {
  return commentArr.map(e => {
    return (
      <li className="comment" key={e.id}>
        <div className="comment-left">
          <span className="comment-id">{e.userId}</span>
          <span className="comment-content">{e.comment}</span>
        </div>
        <div className="comment-right">
          <button className="comment-like">
            <i className="fa-icon fa-regular fa-heart" />
          </button>
          <button className="comment-delete">
            <i className="fa-solid fa-trash-can" />
          </button>
        </div>
      </li>
    );
  });
};

정리해보면 리액트는 자동으로 생성하는 태그인 경우에는 태그들을 추적해야 하는데 추적해야하는 근거가 필요하다. 그 근거로 key라고 하는 약속된 prop을 부여하므로 리액트가 성능을 높이고 정확한 동작하는거라 생각하면 된다.

그리고 상태 안에서 배열을 변경시, 배열에 직접 접근하여 수정하는 것이 아니라 push, concat 등의 배열 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 한다.