useRef

useState와 useRef 모두 주어진 state를 변화시킬 수 있다.
그렇다면 왜 두개를 만들었을까?

tl; dr

useState의 경우 선언한 state가 setter function에 의해 update될 경우, re-rendering process가 진행되지만,
useRef는 state를 변화시킨 후에 component를 re-render하지 않는다.

각각의 state에서 이용할 hook을 설계 할 때, state의 rendering여부를 바탕으로 결정하는 것이 좋고, rendering이 필요한 state의 경우 useState를 이용하는 것이 간편하게 상태관리를 할 수 있고, rendering이 필요하지 않은 state의 경우 useRef를 쓰는 것이 간단하게 코드를 작성 할 수 있다.

이외에도 useRef는 이름을 지어 접근하는 용도와 생애주기 내내 변화하는 값을 가리키고 있다는 차별점을 가지고 있다.

기본 사용법

추가 예정

code dive

추가 예정

렌더링 최적화

비싼 계산이 아니라면 useMemo와 useCallback을 사용하는 것을 권장하지는 않는다.
두 hook모두 동일한 입력이 들어오면 '재활용' '중복연산피하기'에 초점을 두어 어플리케이션의 성능 최적화에 관심이 있는 hook이다.

useMemo

주 사용처 :: 퍼포먼스 향상

Component에서 State값이 변경되면, 해당 Compoenent(부모)와 하위 Component(자식)은 재 렌더링 된다.
재렌더링이라는 것은 리액트에서 다시 그 함수가 호출되어 jsx를 리턴한다는 것을 의미 하는데..
근데.. 값이 변경이 되지 않았는데, 다시 함수를 불러서 값을 재 설정하는 것은 불필요한 행위이지 않을까??
의 관점에서 나온 hook 이다.

tl; dr

메모이제이션 된 '값'을 반환한다.

기본 사용법

추가 예정

code dive

추가 예정

useCallback

useCallback 역시 컴포넌트가 렌더링 될 때마다 내부에 선언되어 있던 함수내용(변수, 또다른 함수 등)도 재 선언되어 사용이 되는데 이 역시 불필요한 행위 이지 않을까?
의 관점에서 나온 hook이다.

tl; dr

메모이제이션 된 '함수'를 반환한다.

기본 사용법

추가 예정

code dive

추가 예정