React #7 _ Key의 중요성

흔히 map 돌릴때 key가 사용되는데

react에서는 key가 되게 유용하다.

 

key가 값을 식별해서 고정시켜준다? 한 마디로 약간 ID 같은 느낌이다.

예를 들어서 

const [counterChanges, setCounterChanges] = useState([
    {
      value: initialCount,
      id: Math.random() * 1000,
    },
  ]);

 

useState 초기값을 이런식으로 만들어서 value와 id를 부여해주고

아래와 같이 받아서 그 값을 사용할 때

<ol>
      {history.map((count) => (
        <HistoryItem key={count.id} count={count.value} />
      ))}
    </ol>

 

key로 고유 id를 지정해놓으면 새로운 값이 추가되더라도 기존의 값을 계속해서 지목한다.

근데 이 방법이 되게 유용한게 react에서는 map에서만 key가 쓰이는 게 아니고

컴포넌트에도 쓰이는데, 이 전에도 key의 기능을 공부했던 적 있었지만

같은 child에 중복해서 쓰면 안되고, 기타 등등

 

근데 만약에 어떤 값에 변화가 없을때는 리랜더링을 방지하고 변화가 있을 때 

그 컴포넌트를 실행시키는 useEffect가 있는데 뭐 물론 useEffect를 사용해도 결과는 같게 작용한다.

예를 들어서

 useEffect(() => {
    setCounterChanges([{ value: initialCount, id: Math.random() * 1000 }]);
  }, [initialCount]);

  // const [counter, setCounter] = useState(initialCount);
  const [counterChanges, setCounterChanges] = useState([
    {
      value: initialCount,
      id: Math.random() * 1000,
    },
  ]);

 

이런식으로 강제적으로 useEffect를 사용해서 초기값을 변경값으로 바꿔줄 수 있지만 이 방법이 효율적이지 않다는 거다.

그냥 단순하고 간단하게

변화하는 값을 컴포넌트에 key로 넣어주면 해결된다.

<main>
        <ConfigureCounter onSet={handleSetCount} />
        <Counter key={chosenCount} initialCount={chosenCount} />
      </main>

 

Counter에 Key로 변화하는 값, 사용자가 인풋에 넣는 값의 state를 key로 등록하니까 key가 변경할때 해당 컴포넌트가 리랜더링 되는 거라서 간단하고 효율적으로 해결된다.

 

useEffect를 남발하지말고 key를 적절하게 사용하자!