useRef
useRef는 React의 Hook 함수 중 하나이다.
useRef는 다음과 같은 역할을 하기 위해 사용된다.
1. 특정 DOM 선택
2. 컴포넌트 안의 변수 생성
3. 리렌더링 방지하기
1) 특정 DOM 선택
JS에서는 특정 DOM을 선택할 때 getElementById와 같은 DOM Selector 함수를 사용해서 DOM을 선택한다.
리액트에서는 DOM을 선택할 때 ref를 사용한다.
함수형 컴포넌트에서는 useRef라는 Hook함수를 사용한다.
2) 컴포넌트 안의 변수 생성
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않는다.
리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고나서 렌더링 이후에 업데이트 상태를 조회할 수 있지만,
useRef로 관리하는 변수는 설정 후 바로 조회할 수 있다.
3) 리렌더링 방지
렌더링이란 함수(컴포넌트)를 호출하여 실행되는 것을 말한다.
컴포넌트는 자신의 state가 변경되거나 부모 컴포넌트에서 받는 props가 변경되었을 때 리렌더링 된다.
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않으므로 리렌더링 방지에 활용할 수 있다.
useCallback
useCallback은 메모제이션된 함수를 반환하는 함수이다.
예를 들어 컴포넌트 안에 선언된 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어지게 된다.
그렇기 때문에 한번 만든 함수를 재 사용하고 필요할 때만 재생성하는 것이 중요하다.
useCallback(fn, deps);
React.memo
부모 컴포넌트가 리렌더링 되어도 props가 이전과 동일한 결과를 렌더링 한다면 React.memo를 호출하고 컴포넌트를 메모이징 하도록 래핑하여 결과를 보여주게 한다.
