이번 시간에는 저번 시간에 이어서
이 플레이어 컴포넌트와 수정 기능 작업을 하겠습니다
그 전에 중요한 부분이 하나 있습니다
이 어플리케이션에서 볼 수 있듯이, 새로고침을 하고
수정(Edit)을 누르면 입력 필드가 나옵니다
하지만 나머지 플레이어 컴포넌트는 변화가 없습니다
여기는 아직 기존 플레이어 이름만을 보여주고 있습니다
이 부분이 아주 중요합니다
저희가 여기에서
동일한 플레이어 컴포넌트를 사용하고 있지만
컴포넌트를 한 번 혹은 여러 번 사용할 때마다
리액트는 새로운 인스턴스(instance)를 생성합니다
두 플레이어 모두 여기에서
동일한 플레이어 컴포넌트를 사용하지만
완전히 따로 작동한다는 의미입니다
만약 여기
플레이어 1의 컴포넌트 상태에 대한 인스턴스가 변한다면
그것은 플레이어 2의 컴포넌트 인스턴스에
전혀 영향을 주지 않습니다
여기에서는 전혀 알지 못합니다
즉 이 두 컴포넌트는
동일한 로직을 공유하고 있지만
컴포넌트를 사용하는 순간
완전히 분리된 인스턴스가 각각 생성되어
동일한 로직을 사용할지라도
사용하는 위치가 따로 분리됩니다
이것을 리액트를 이해하는 데에 아주 중요한 부분입니다
제가 이번 시간에 강조하고 싶은 내용이기도 합니다
이것이 리액트의 아주 강력한 기능이 될 수 있기 때문입니다
이렇게 분리되는 속성을 이용해
아주 복잡한 컴포넌트를 만들어서
재사용 시 서로에게 영향을 주지 않게 할 수 있습니다
이 기능이 유용한 이유는
여기에서 수정(Edit)을 클릭할 때
플레이어 2에 대한 정보가 수정된다면
문제가 심각해질 것이고
이런 방식으로 작동한다면 컴포넌트 자체가
무용지물인 개념이 되고 말 것입니다
다행히 리액트에서 이런 문제는 일어나지 않습니다