요약

렌더링 최적화, 버그 방지

key의 중요성

• 컴포넌트의 안전한 식별자 역할을 한다.
• key가 없어서 구분이 안되면 변경된 요소만 추가하는 것이 아니라 전체를 리렌더링해버리는 비효율이 발생한다.

key에 index를 넣는 실수

• key에 대해 검색하면 항상 나오는 예시이다.
• key는 유니크해야 한다.
• index를 넣으면 배열이 추가, 삭제, 재배치될 경우 key가 변경되며 전부 리렌더링된다.
• 심지어 해당 요소의 데이터가 자기 위치를 찾지 못해서 엉뚱한 곳으로 가거나 배열의 요소가 복제되는 등 예측할 수 없는 일들이 벌어질 수 있다.

key가 필요한 기준

• 리스트 또는 배열을 통한 컴포넌트를 렌더링할 때

예시 코드

  const handleTagChange = e => {
    const isEnter = e.key === "Enter";
    const isNotEmpty = e.target.value.trim() !== "";

    if (isEnter && isNotEmpty) {
      const newTag = e.target.value.trim();
			// 중복 검사를 실시하여 tag 배열에는 중복 없는 문자열이 누적 된다.
      if (!tags.includes(newTag)) {
        setTags([...tags, newTag]);
      }
      e.target.value = "";
    }
  };

  return (
    <>
      <div>
        <p className={addItemStyles.titleForms}>태그</p>
        <input
          maxLength={30}
          placeholder={PLACEHOLDER.tags}
          onKeyUp={handleTagChange}
        />
      </div>
      <div className={styles.containerTags}>
        {tags.map(tag => (
	        // tag는 중복이 없는 문자열이기 때문에 바로 key에 넣어도 된다.
          <div className={styles.tag} key={tag}>
            <span>{tag}</span>
            <button
              className={styles.btnClose}
              type="button"
              onClick={() => {
                handleTagDeleteClick(tag);
              }}
            />
          </div>
        ))}
      </div>
    </>
  );

예시 코드는 태그를 추가하는 기능 중 일부이다.

input의 handleTagChange함수가 실행되며 입력된 문자열을 tags 배열에 추가한다.

tags.map으로 여러 tag를 렌더링하는데 key값으로 tag의 문자열을 바로 넣는다.

중복이 없는 값이기 때문에 key로 사용할 수 있다.

실패 사례

1. key={${tag}-${i}}
   • index를 바로 사용하지 않고 tag와 조합해서 유니크한 값을 만드려는 시도이다.
   • 그러나 마지막 요소를 제외한 앞의 값 중 하나를 제거하고 마지막 요소와 동일한 tag가 입력되면 동일한 tag와 i를 가진 요소가 추가되며 중복이 발생한다.
   • tag의 중복 검사를 추가 했더니 i를 조합할 필요가 없어졌다.
2. key={타임스탬프 또는 랜덤숫자 생성하는 함수}
   • 유니크한 값을 넣겠다고 이렇게 직접 함수를 실행하게 되면 배열이 변경되어 map이 다시 진행될 때 항상 새로운 값으로 변경되기 때문에 전체 리렌더링의 비효율을 개선할 수 없다.
   • 요소 하나를 생성할 때 함수가 하나씩 실행되므로 성능은 더 나빠진다.