memo는 신경써서 쓰기만 한다면 유용하지만
꼭 그것만이
불필요한 랜더링을 방지할 수 있는 방법은 아닙니다
어떤 상황에선 memo 보다 강력한 방법이 있는데
그건 바로 앱 내
현명한 컴포넌트 구성입니다
예를 들어 여기, input을 사용한 섹션이 있는데
모든 입력을 등록하고
입력마다 상태를 바꿉니다
이 앱 컴포넌트 내에서 일어나는 일입니다
이제 물론, 다른 컴포넌트로 따로 분리하고
입력마다 바뀌는 이 상태도
이 따로 분리된 컴포넌트에 속하며
컴포넌트에도 영향을 주지 않습니다앱
그래서 여기에 따로 컴포넌트를 추가할 수 있고
ConfigureCounter 로 이름을 지을 수 있습니다
이런 식으로
ConfigureCounter 컴포넌트 함수를 내보내면
컴포넌트의 여기 이 섹션 코드를앱
가져와서 자르고 이곳
ConfigureCounter 안에 반환한 후 여기서도
코드를 가져와서 복사하고 이곳에 추가합니다
여기서는 chosenCount 상태가 필요 없고
enteredNumber만 있으면 됩니다
이제는 상태를 끌어올리기만 하면 된다고
표현해보겠습니다
그럼 당연하게도 숫자가 입력되면
'설정' 버튼을 누름으로 확정됩니다
이 정보를 ConfigureCounter에서
앱 컴포넌트로 전파시키는데 그 상태가 필요하기 때문입니다
그래서 그게
Counter 컴포넌트로 전달되고
추후에 필요하게 될 겁니다
그래서 앱 컴포넌트 안에서
이 함수들과
EnteredNumber 상태를 제거할 수 있습니다
하지만 ChosenCount 상태는 꼭 유지해야 하며
여기에 새로운 함수를 추가해야 합니다
이름은 'handleSetCount'입니다
이것으로 새로운 카운트를
입력값과 매개변수로
받을 수 있기를 예상합니다
그리고 나서 setChosenCount를 부르고
newCount를 값으로 지정합니다
여기서는 configureCounter를 사용해야 하니까
여기에 불러오시면 됩니다
그리고 'ConfigureCounter' 에는 속성을 설정해야 합니다
이 함수를 전달할 수 있도록 말입니다
그래서 여기 이 함수는
'ConfigureCounter' 안에서 실행될 수 있습니다
지난 수업 과정 동안 많이 사용했던 방법입니다
이 속성의 이름은 onSet이라고 짓고
handleSetCount를 가리키도록 합니다
그리고 ConfigureCounter에서
onSet이라고 지었든 뭐라고 지었든, 이 속성을
구조 분해(destructure)할 수 있습니다
그리고 꼭 useState를 리액트로부터 불러와야 합니다
그럼 이제 handleSetClick 안에서
setChosenCount를 부르는 대신
onSet을 여기다 부르고
enteredNumber를
함수의 값으로 전달합니다
궁극적으로 두 개의 handleSetCount가 있죠
그걸로 인해 우리는 이제
이 상태가 분리된 컴포넌트에서
매 입력마다 바뀌도록 해야 합니다
그리고 그게 이 컴포넌트 함수를
다시 실행되도록 합니다
하지만 앱 컴포넌트는 ConfigureCounter 내
매 입력마다 재실행되지 않을 것이며
그 이유는 전에 말했듯이
상태가 바뀌어도 자식 컴포넌트의 재실행은
부모 컴포넌트의 실행을 야기하지 않기 때문입니다
이걸 시각화해보기 위해, 이 log 함수를 추가해보겠습니다
이는 log.js 파일에서 가져와야 하며
'ConfigureCounter'를 출력해야 합니다.
그리고 이건 레벨 1인 상태입니다
이 앱 컴포넌트의 한 단계 아래 있기 때문입니다
이제 전체 저장을 하고 새로고침을 하겠습니다
ConfigureCounter이 초기에 실행된 게 보입니다
하지만 이걸 지우고 이 값을 바꿔 보면
이제는 ConfigureCounter만 실행됩니다
컴포넌트는 실행되지 않습니다앱
이전에 실행됐던 Header도 실행되지 않습니다
Counter도 마찬가지로 실행되지 않고요
그리고 여기서 해야 하는 건 꼭 memo를
counter에서 제거해햐 합니다
컴포넌트가 더 이상 실행되지 않기 때문에앱
여기 새로운 값을 입력해도
ChosenCount가 업데이트될 때만 실행될 겁니다
그러니까 우리가 이 설정 버튼을 누를 때입니다
하지만 그 일이 일어나면
counter 함수 또한 재실행시키는 것입니다
ChosenCount를 속성으로 받았고
memo가 다른 값을 확인하기 때문입니다
이것은
우리가 이전과 똑같은 counter 값을 입력하지 않는 이상 그렇습니다
그건 memo가 여전히 유용한
경우 중 한 가지였습니다
하지만 대개의 경우에 memo는 유용하지 않을 겁니다
다 다른 값을 사용할 테니까요
그러므로 이제 우리는
memo가 제거되야 한다고 주장할 수 있습니다
그다지 많은 counter 함수 실행을
저지해 주지 않기 때문입니다
하지만 이 확인 과정은 꼭 수행할 것입니다
성능에 부담을 주긴 하지만 말입니다
여러분들이 나중에도 볼 수 있도록
여기에 그대로 두겠습니다
하지만 주의하시기 바랍니다
여기서는 memo를 제거해도 되는 상황입니다
있을 만한 이유가 딱히 없기 때문입니다