key
를 사용해 React가 모든 컴포넌트를 구분하도록 할 수 있다.key
를 지정하면 React가 부모 내 순서가 아닌 key
자체를 위치의 일부로 사용하도록 지시합니다.TIP : 키는 전역으로 고유하지는 않다는 점을 기억하세요. 키는 부모 내에서의 위치만 지정합니다.****
그렇기 때문에 JSX에서 같은 위치에 렌더링하더라도 React의 관점에서 보면 두 카운터는 서로 다른 카운터입니다. 결과적으로 state를 공유하지 않습니다. 카운터가 화면에 나타날 때마다 그 state가 생성됩니다. 카운터가 제거될 때마다 그 state는 소멸됩니다. 두 카운터 사이를 토글하면 state가 계속 초기화됩니다.