LEARN REACT_MANAGING STATE_Preserving and Resetting State 👉 키가 필요한 이유

출처: React doc

Resetting state at the same position

1. Render components in different positions
2. Give each component an explicit identity with key

Option 1: Rendering a component in different positions

• 코드 1

 	  {isPlayerA ? (
        <Counter person="Taylor" />
      ) : (
        <Counter person="Sarah" />
      )}

• 코드 2

      {isPlayerA &&
        <Counter person="Taylor" />
      }
      {!isPlayerA &&
        <Counter person="Sarah" />
      }

👉 코드 1의 경우 같은 Counter로 인식함. 코드 2의 경우 다른 Counter로 인식하여 state 공유를 하지 않음.

This solution is convenient when you only have a few independent components rendered in the same place.

👉 두개의 같은 component가 있을 경우 유용한 방법.

Option 2: Resetting state with a key

{isPlayerA ? (
  <Counter key="Taylor" person="Taylor" />
) : (
  <Counter key="Sarah" person="Sarah" />
)}

You might have seen keys when rendering lists. Keys aren’t just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent (“first counter”, “second counter”) to discern between components. But keys let you tell React that this is not just a first counter, or a second counter, but a specific counter—for example, Taylor’s counter. This way, React will know Taylor’s counter wherever it appears in the tree!

This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed.

👉 component의 이름이 같아도 key를 붙이는 순간 각각 다른 component로 인식한다. 다른 componet로 인식되기 때문에 state를 절대로 공유하지 않는다.

Note
Remember that keys are not globally unique. They only specify the position within the parent.