let 방식으로 카운트를 올리면 리렌더링이 되지 않기 때문에 카운트: 0의 숫자는 변하지 않는다. Document.getElementById로 값을 넣어주어야 한다.
state 방식으로 카운트를 올리면 자동으로 리렌더링되어 브라우저에 카운트가 올라간다. 하지만 나는 부모 컴포넌트를 클릭했을 뿐인데 자식 컴포넌트까지 리렌더링이 되어 자식 컴포넌트가 많은 경우에 문제가 생길 수 있다.
또, state가 리렌더링되면서 let까지 초기화가 되어버린다.
초기화가 된다는 것은 기존의 값이 사라지는 것이 아니라 새로운 값이 메모리 어딘가에 새롭게 저장이 된다는 것을 의미한다.
이런 것들을 어떻게 최적화할 수 있을까?
useMemo()은 안에 넣어준 변수를 저장해서 다음에 리렌더링될 때 새롭게 만들지 않고 기록해놓은 것을 가져오는 역할을 한다. 이렇게 하면 리프레시되었을 경우에 기존에 기록된 변수를 가져다 쓰게 된다.
변수를 초기화하고 싶을 때는 dependency array[] 부분에 countState가 바뀔 때 초기화하겠다고 적어주면 된다.
함수를 기억하고 싶을 때는 useCallback을 사용하면 된다.
useCallback 사용 시 주의해야 할 점이 있다.
안에 state도 같이 기억해서 버튼을 여러 번 클릭해도 count가 계속 1이다.
제대로 사용하기 위해서는 prev를 적어주어야 한다.
이렇게 하면 함수 전체는 저장이 되어 있고, 실행했을 때 실행 결과도 그때 그때 적용이 되어 가장 최적화되었다고 볼 수 있다.
부모 컴포넌트만 리렌더링 시키고 싶다면 자식 컴포넌트를 memo()로 감싸주면 된다.
