[React Hook] 3. Hooks (useMemo, useCallback, useRef)

1. useMemo

useMemo는 컴포넌트 내부에서 발생하는 불필요한 연산을 최적화할 수 있다.

아래와 같이 소스코드를 작성한다.

 

해당 컴포넌트를 실행하고, input에 입력을 해보자.

로그를 보면 button의 onClick이 발생하지 않아도 input값의 변경으로 인해 getAverage가 일어나게 된다.

getAverage가 값들이 들어있는 list가 변경될 때 마다만 호출하려면 useMemo를 사용하면 된다.

위와같이 변경 하면 button의 onClick 이벤트로 인해 list가 수정될 때만 getAverage함수가 호출되는것을 볼 수 있다.

 

2. useCallback

useCallback은 useMemo와 유사하다. 

이전에 만든 Average 컴포넌트를 보면 컴포넌트가 리랜더링 될 때 마다 onChange와 onInsert라는 함수가 매번 새로 생성된다.

랜더링이 자주 일어나는 화면에서는 위와같이 하면 성능 이슈가 발생할 수 있다.

두 번째 파라미터는 배열이 들어가며, useEffect와 같이 빈 배열이면 최초 랜더링 될 때만 발생한다.

useEffect : 값이 변경되면 실행
useCallback : 값이 변경 되고 함수가 이전과 다르면 리랜더링
useMemo : 값이 변경되고 함수 리턴이 이전과 다르면 리랜더링

 

inChange와 onInsert를 useCallback으로 만들면 아래와 같다.

 

3. useRef

useRef는 useState와 비슷하게 상태를 관리하기 위한 함수이다.

useState와 다른점은 랜더링이 상대적으로 덜 발생한다는 장점이 있다. 하지만 동적으로 화면을 계속 랜더링 해야하는 경우는 useState를 사용해야 한다.

아래 예를 확인해보자.

 

처음 화면이 랜더링되면서 한번, 그리고 1234를 입력하면서4번, 회원가입 버튼을 누르면서 1번 렌더가 됬다.

해당 경우를 useRef를 사용하면 다음과 같다.

useRef를 사용하면 render가 최초 한번, 회원가입 버튼을 누를 때 한번 나오는것을 볼 수 있다.

current.focus() 메소드를 사용하면 해당 state로 커서를 옮길 수 있다.