AI 요약관련 정보

• key가 없는 리스트 렌더링은 비효율적인 DOM 업데이트를 유발하며, React는 어떤 항목이 변경되었는지 식별하지 못해 불필요한 재렌더링을 발생시킵니다. 🔄
• key는 React가 리스트 항목의 변경, 추가, 삭제를 효율적으로 식별하고 DOM을 최적화하여 업데이트할 수 있도록 돕는 고유한 식별자입니다. 🔑
• 배열의 index를 key로 사용하는 것은 리스트 항목의 순서가 변경되거나 추가/삭제될 때 예상치 못한 버그(예: 메모 내용이 다른 항목으로 이동)를 발생시킬 수 있으므로 지양해야 합니다. ⚠️
• index를 key로 사용할 수 있는 예외적인 경우는 리스트의 순서가 절대 변하지 않고, 항목이 추가/삭제되지 않으며, 고유한 식별자가 없는 정적인 리스트에 한정됩니다. 🧊
• key 값은 반드시 고유해야 하며, 중복된 key를 사용하면 React는 경고 메시지를 출력하고 예측 불가능한 렌더링 오류를 발생시킬 수 있습니다. 🚫
• 가장 이상적인 key 값은 백엔드에서 제공하는 고유하고 변하지 않는 id이며, 이것이 불가능할 경우 nanoid나 uuid와 같은 라이브러리를 사용하여 고유한 값을 생성할 수 있습니다. 🆔
• nanoid나 uuid와 같은 고유 ID 생성 라이브러리를 사용할 때는 렌더링 시마다 새로운 key를 생성하지 않도록 주의해야 합니다 (예: map 함수 내에서 직접 호출 금지), 이는 불필요한 재렌더링을 유발합니다. 💡
• key 속성은 map 함수 내에서만 사용되는 것이 아니라, 조건부 렌더링 등으로 인해 동일한 컴포넌트 타입의 인스턴스가 변경될 때 React가 각 컴포넌트의 상태를 올바르게 관리하도록 돕는 데에도 사용됩니다. 🎭