React 키, 예! 꼭 필요한데 왜 필요한가요?

또한 기억해야 할 것이 하나 더 있는데 바로 React 키 속성이 있으면 렌더링된 목록의 각 요소에 해당 속성이 있어야 합니다. 이 개념은 모든 프론트엔드 개발자가 가장 먼저 배우는 것 중 하나입니다. React 여정을 시작할 때입니다. 이제 좀 더 자세히 살펴보고 왜 이런 현상이 발생하는지, 그리고 언제 지름길을 택할 수 있는지 알아보겠습니다.

이 키 속성이 필요한 이유는 무엇인가요?

가장 간단한 대답은 "리렌더를 최적화하는 것"이지만, 더 완벽한 대답은 적어도 다음과 같은 개념을 언급해야 합니다. React 조정. 가장 효율적인 방법으로 UI를 업데이트하는 방법을 알아내는 과정입니다. 이를 빠르게 수행하기 위해 React 는 요소 트리에서 어떤 부분을 업데이트해야 하고 어떤 부분을 업데이트하지 않아야 하는지 결정해야 합니다. 문제는 DOM에 많은 요소가 있을 수 있으며 업데이트해야 할 요소를 결정할 때 각 요소를 비교하는 데 상당한 비용이 든다는 것입니다. 이를 최적화하기 위해 React 는 두 가지 가정에 기반한 디핑 알고리즘을 구현합니다:

1. 서로 다른 두 가지 유형의 요소는 결코 같을 수 없으므로 다시 렌더링하세요.
2. 개발자는 주요 속성을 통해 이 프로세스를 수동으로 최적화할 수 있으므로 순서가 변경된 요소라도 더 빠르게 로컬라이즈하고 비교할 수 있습니다.

이를 바탕으로 다음과 같은 결론을 내릴 수 있습니다. React 키 는 고유해야 하며(전역이 아닌 요소 목록 내에서), 안정적이어야 합니다(변경되지 않아야 함). 하지만 그렇지 않은 경우 어떤 일이 발생할 수 있을까요?

고유성, 안정성 및 배열 인덱스

앞서 언급했듯이 React 키 는 안정적이고 고유해야 합니다. 이를 달성하는 가장 쉬운 방법은 배열을 매핑할 때 데이터베이스에서 얻은 고유 ID를 사용하여 각 요소에 전달하는 것입니다. 하지만 각 요소에 전달할 ID, 이름 또는 기타 고유 식별자가 없는 상황은 어떻게 해야 할까요? 아무 것도 키로 전달하지 않는다면요, React 는 기본적으로 현재 배열 인덱스(해당 목록 내에서 고유하므로)를 사용하여 처리하지만 콘솔에 멋진 오류 메시지도 표시합니다:

왜 그럴까요? 답은 배열 인덱스가 안정적이지 않기 때문입니다. 요소의 순서가 변경되면 각 키가 변경되어 문제가 발생합니다. 만약 React 가 요소 목록의 순서가 변경된 상황에 직면하더라도 여전히 키를 기준으로 비교를 시도하므로 모든 비교가 컴포넌트를 다시 빌드하는 것으로 끝나고 결과적으로 전체 목록이 처음부터 다시 빌드됩니다. 그 외에도 제어되지 않은 입력과 같은 요소에 대한 컴포넌트 상태 업데이트나 기타 디버깅하기 어려운 마법 같은 문제와 같은 예기치 않은 문제가 발생할 수 있습니다.

예외

배열 인덱스로 돌아가 보겠습니다. 배열 인덱스를 React 키 이 그렇게 문제가 될 수 있는 이유는 React 가 기본적으로 사용하게 되나요? 그렇게 해도 괜찮은 사용 사례가 있나요? 정적 목록이 그 사용 사례입니다. 렌더링하는 목록의 순서가 절대 바뀌지 않을 것이 확실하다면 배열 인덱스를 사용해도 안전하지만, 고유 식별자가 있는 경우 이를 대신 사용하는 것이 더 낫다는 점을 기억하세요. 또한 인덱스를 키로 전달하면 React 오류 메시지가 사라지는 동시에 일부 외부 린터가 오류 또는 경고를 표시하도록 트리거합니다. 이는 인덱스를 키로 명시적으로 사용하는 것이 나쁜 관행으로 간주되고 일부 린터에서는 이를 오류로 처리할 수 있기 때문입니다. React 자체가 "개발자가 무엇을 하는지 알고 있는" 상황으로 간주하므로 정말 자신이 무엇을 하고 있는지 잘 모르는 경우가 아니라면 사용하지 마세요. 이 예외를 사용해도 괜찮은 몇 가지 예로는 정적 버튼 목록이 있는 드롭다운이나 회사 주소 정보가 포함된 요소 목록을 표시하는 경우가 있습니다.

데이터 세트 기반 키의 대안

위의 옵션 중 어느 것도 사용할 수 없다고 가정해 보겠습니다. 예를 들어, 중복될 수 있지만 순서를 바꿀 수 있는 문자열 배열을 기반으로 요소 목록을 표시해야 한다고 가정해 보겠습니다. 이 경우 문자열은 고유하지 않기 때문에 사용할 수 없으며(이 경우에도 마법 같은 버그가 발생할 수 있습니다), 요소의 순서를 변경하기 때문에 배열 인덱스가 충분하지 않습니다. 이런 상황에서 마지막으로 의지할 수 있는 것은 외부 식별자를 사용하는 것입니다. 안정적이어야 하므로 Math.random()을 사용할 수 없다는 점을 기억하세요. 이러한 경우에 사용할 수 있는 NPM 패키지가 몇 가지 있는데, 예를 들어 "uuid" 패키지를 사용하세요. 이와 같은 도구를 사용하면 데이터 세트 내에서 적절한 식별자를 찾을 수 없는 경우에도 목록 키를 안정적이고 고유하게 유지할 수 있습니다. 가능하다면 데이터베이스 ID와 배열 인덱스(가능하면)를 먼저 사용하여 프로젝트.

마무리하기

• 목록의 각 요소는 React 요소에는 고유하고 안정적인 키 속성이 있어야 합니다,
• React 키 의 속도를 높이는 데 사용됩니다. 조정 프로세스 를 사용하여 목록의 요소를 불필요하게 재구성하지 않도록 합니다,
• 키의 가장 좋은 소스는 데이터 입력 고유 ID(예: 데이터베이스)입니다,
• 배열 인덱스를 키로 사용할 수 있지만 순서가 변경되지 않는 정적 목록의 경우에만 사용할 수 있습니다,
• 안정적이고 고유한 키를 얻을 수 있는 다른 방법이 없는 경우 "uuid" 패키지와 같은 일부 외부 ID 공급자를 사용하는 것이 좋습니다.

자세히 읽어보세요:

타입스크립트를 사용해야 하는 (아마도) 이유

잘못된 코딩 관행으로 프로젝트를 죽이지 않는 방법은 무엇인가요?

NextJS의 데이터 가져오기 전략