이전 시간에 보신 대로
키(key)는 목록에 이렇게나 중요한 역할을 합니다
하지만 지금부터 보여드리는 대로
키는 목록에서만 유용한 게 아닙니다
앱 컴포넌트로 돌아가 봅시다
여기서 ChosenCount를 관리하고
Counter에 initialCount 값으로 전달합니다
하지만 지금은, 제가 이 값을 바꾸고 '설정'을 클릭하면
많은 변화가 있진 않습니다
자세히 보면
이 값이
그리고 이 값이 바뀌거나 영향을 받은 걸 볼 수 있습니다
예를 들어, 제가 여기에 소수를 입력하면
이것도 바뀌지만, 이 값은 바뀌지 않습니다
그리고 사실 제가 보여드리고 싶은 것은
여기에 새로운 값을 입력하고
이 카운터를 우리가 여기 입력한 값으로
재설정하겠습니다
하지만 그렇게 하는 이유는
이 intialCount 값이
재설정될 때
상태의 초기값으로 쓰여서가 아닙니다
useState로 전달되는 이 초기값은
이 컴포넌트 함수의 첫 실행 이후로
다시는 사용되지 않습니다
초기화에만 사용되고 다른 곳에는 쓰이지 않습니다
그게 이후 initalCount 변동이 무시되는 이유입니다
하지만 카운터를 재설정하고 싶으면 어떻게 할까요?
즉 이 속성이 바뀌고 나서입니다
한 가지 할 수 있는 건 useEffect를 사용하는 것입니다
여기 이 파일에 useEffect를 가져오겠습니다
그리고 Counter 컴포넌트 함수에서
예를 들어 여기
useEffect를 실행하고 Effect 함수를 전달할 수 있습니다
의존성 배열에도 함께 전달합니다
그 다음 initialCount를 의존성으로 추가하고
setCounterChanges를 불러옵니다
그리고 이걸 새로운, 비어있는 배열에 지정합니다
초기값은 이 하나가 전부입니다
intialCount를 기반으로 하죠
그걸로 이 배열을 재설정할 수 있습니다
이제 저장하고 새로고침을 해 보면
여기서 카운터를 수정할 수 있습니다
하지만 이제 새로운 값을 입력하면
재설정된 것이 보이는데, 잘 작동한다는 의미입니다
이 접근법은 잘 작동하지만
사실 useEffect의 사용은
제한하기를 권장합니다
대부분의 경우는 최적의 방법으로 쓰이지 않고
추가적인 컴포넌트 실행을 요구하기 때문입니다
이미 배웠듯이 여기 있는 이 컴포넌트가
컴포넌트 함수 실행 이후에 실행되는데
그리고 거기서 상태를 바꾸면
마찬가지로
또 다른 컴포넌트 함수 실행을 야기합니다
그러니까 하나면 될 것을 두 개의 컴포넌트 함수가
실행되어야 하는 것이죠
그리고 그건 최선의 방법이 아닙니다
그러니까 컴포넌트 함수를
재설정하기 더 좋은 방법은
결국 여기서 우리가 하고 싶은 건
initialCount가 바뀔 때마다
컴포넌트에 키를 사용하는 것입니다
이 Counter 컴포넌트는
ChosenCount를 initialCount 값으로 사용하는데
여기에 키를 추가합니다
왜냐하면 키 속성을 어느 컴포넌트에든 추가할 수 있기 때문입니다
목록에 사용되는 컴포넌트에만 추가할 수 있는 게 아닙니다
그러면 이제 chosenCount를 키로 사용할 수 있습니다
만약 그걸 컴포넌트 하나에만 적용했는데
두 개에 적용시키고 싶다면
리액트에게서 경고를 받을 것입니다
그러니 다른 키를 찾아야 할 겁니다
하지만 좋은 것은 지금
키 값이 바뀔 때마다
ChosenCount 상태 값도 바뀝니다
그러면 리액트는
이전 컴포넌트 인스턴스(instance)는 삭제합니다
지우고 재생성합니다
마치 이 counter 컴포넌트를 처음
랜더링하는 것처럼 말입니다
그러므로 이건 괜찮은 방법이자
정확히는 패턴이라고 말할 수 있습니다
이 패턴은 외부에서 보이는 컴포넌트 내에서
변경될 수 있는 상태가 있는 경우 사용해야 합니다
이것과 같은 경우입니다
그런 다음 그게 자식 컴포넌트로 이어집니다
이 counter 컴포넌트처럼, 재설정되어서 이어집니다
이 접근방식을 사용하고 useEffect를 사용하지 않으면
이 import문은 제거해도 됩니다
이 접근 방식을 사용하면
추가적인 컴포넌트 실행을 피할 수 있습니다
지난 컴포넌트가 제거되고
같은 타입의 새로운 컴포넌트가
재삽입되었기 때문입니다
그 다음엔 리액트를 통해 실행되고
그러므로 딱 한 번 실행됩니다
저장하고 새로운 상태를 지정하면
이전과 같은 과정을
좀 더 효율적인 방법으로 보게 될 겁니다
또 다른 좋은 패턴에 대해 배웠으니 꼭 기억해 두시기 바랍니다