[React] 반복문으로 컴포넌트를 호출할 때 `key`

react에서는 각종 컴포넌트를 미리 만들어 놓고 필요에 의해 호출하여 사용한다. 반복되는 컴포넌트는 반복문을 통해 호출하게 되는데 이 때 각 컴포넌트에 `key` 를 지정할 수가 있다. 

 

💡 key

• key는 반복문으로 호출되는 컴포넌트에 전달(포함)시키는 값이다. 
• 리스트로 이루어진 컴포넌트 중에서 값의 변화가 이루어지는 컴포넌트를 식별하기 위해서 사용한다.
  • 즉, `key`가 없으면 컴포넌트를 순회하여 변화를 감지한 이후에 리렌더링을 하게 되고 성능적으로 좋지 않다.
• 각각의 컴포넌트에 고유한 값을 전달해야 한다. 
• `key`를 직접 명시하지 않으면 자동으로 인덱스를 `key` 로 사용한다.