컴포넌트 충돌을 피하기 위해 React 키를 사용하는 방법

 import { useState } from "react"
import { Counter } from "./Counter"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return (
    <div>
      { isKingsley ? 
        (<div>
          <Counter name="Kingsley" /> 
        </div>)
        : 
        (<section>
          <Counter name="Sally" /> 
        </section>)
      }
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}
 

“킹슬리” 카운터를 증가시킨 후 “스왑” 버튼을 클릭하면 두 DOM(문서 객체 모델) 트리의 구조가 서로 다르기 때문에 시스템 상태가 재설정되는 문제가 발생합니다.

애플리케이션의 동작은 킹슬리 변수의 진리 값에 따라 달라집니다. 참이면 HTML 구조는 세 개의 중첩된 요소로 구성됩니다. div 요소는 다른 두 개의 div 요소 안에 포함되고 마지막으로 카운터 구성 요소를 포함하는 또 다른 div 요소로 둘러싸여 있습니다. 그러나 사용자가 카운터 컴포넌트의 상태를 전환하는 버튼을 클릭하여 시스템과 상호 작용하면 결과 구조는 단일 div 요소, 섹션 요소, 카운터 컴포넌트로 변경됩니다. 이러한 구조 변경은 이전 구조와 현재 구조가 일치하지 않기 때문에 카운터 컴포넌트의 상태를 새로 고치는 작업을 트리거합니다.

이러한 방식으로 마크업의 구성을 일관되게 수정하고 싶지 않을 수도 있습니다. 이 문제를 해결하기 위한 대안적인 접근 방식은 고유한 마크업에 대한 요구 사항을 제거합니다.

키를 사용하여 새로운 컴포넌트 렌더링하기

React는 컴포넌트를 렌더링할 때 컴포넌트를 구분하는 수단으로 키를 사용합니다. 동일한 컴포넌트가 여러 개 존재하는 경우, 고유한 키를 할당하면 React가 각 컴포넌트의 개성을 인식할 수 있습니다. 고유 키 속성은 각 컴포넌트 인스턴스에 특정한 식별자를 제공함으로써 이러한 목적을 수행합니다.

물론입니다! 요청을 우아하게 바꾸는 방법은 다음과 같습니다: ”’자바 지도 map = 새로운 해시맵<>(); map.put(“apple”, 3); map.put(“바나나”, 5); map.put(“orange”, 2); for (Map.Entry entry : map.entrySet()) { System.out.println(entry.getKey() + “=” + entry.getValue()); } “`

 import { useState } from "react"
import { Counter } from "./Counter"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return(
    <div>
      { isKingsley ? 
        <Counter key="Kingsley" name="Kingsley" /> : 
        <Counter key="Sally" name="Sally" /> 
      }
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}
 

“Kingsley” 카운터의 값을 늘리고 “Swap” 버튼을 클릭하면 React는 카운터의 새 인스턴스를 생성하고 내부 상태를 초기값인 0으로 복원합니다.

React를 사용하여 동질적인 엘리먼트 배열을 렌더링할 때는 배열 내의 각 컴포넌트 인스턴스에 고유한 키를 사용하는 것이 좋습니다. 이렇게 하면 React가 한 엘리먼트를 다른 엘리먼트와 효과적으로 구별할 수 있고 필요에 따라 컴포넌트를 효율적으로 가상화 및 재활용할 수 있습니다.

 export default function App() {
  const names = ["Kingsley", "John", "Ahmed"]

  return(
    <div>
      { names.map((name, index) => {
        return <Counter key={index} name={name} />
      })}
    </div>
  )
}
 

React는 할당된 각 키에 대해 별도의 개수를 유지함으로써 배열의 각 엘리먼트에 고유 식별자를 활용합니다. 이를 통해 React는 배열에 대한 모든 수정 사항을 효과적으로 추적하고 업데이트할 수 있습니다.

다른 고급 키 사용 사례

키-값 쌍을 활용해 서로 다른 두 컴포넌트 간의 관계를 설정할 수 있습니다. 특히 이러한 키를 사용하여 특정 상태 변수의 현재 상태에 따라 다양한 요소를 할당할 수 있습니다.

이 개념을 실제로 설명하기 위해 앱 컴포넌트 내에서 몇 가지 변경 사항을 구현하여 수정해 보겠습니다.

 import { useState } from "react"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return(
    <div>
      { isKingsley ? <div>Kingsley's Score</div> : <div>Sally's score</div> }
      <input key={ isKingsley? "Kingsley" : "Sally" } type="number"/>
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}
 

사용자가 해당 버튼을 클릭하여 킹슬리와 샐리와 연관된