[React] #8 Hooks (2)

useCallback

useCallback 함수는 useMemo와 비슷한 함수로, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

const onChange = useCallback(e => {
  setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성
const onInsert = useCallback(() => {
  const nextList = list.concat(parseInt(number));
  setList(nextList);
  setNumber(“);
  }, [number, list]); // number 혹은 list가 바뀌었을 때만 함수 생성

useCallback의 첫 번째 파라미터에 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣는다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 생성할지 명시한다. onChange처럼 빈 배열을 넣게 되면 컴포넌트가 렌더링될 때 단 한 번만 함수가 생성되고, onInsert처럼 배열 안에 number와 list를 넣게 되면 인풋 내용이 바뀌거나 새로운 항목이 추가될 때마다 함수가 생성된다. 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다. onChange의 경우 기존의 값을 조회하지 않고 바로 설정만 하기 때문에 배열이 비어 있어도 상관없지만, onInsert는 기존의 number와 list를 조회해서 nextList를 생성하기 때문에 배열 안에 number와 list를 꼭 넣어 주어야 한다.

 

useRef

useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 한다.

 

렌더링과 상관없이 바뀔 수 있는 값을 의미하는 컴포넌트 로컬 변수를 사용해야 할 때도 useRef를 활용할 수 있다. 

 

---

 

useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킵니다.

>> ?? useRef 이해 안 됨

 

 

참고 자료 : https://thebook.io/080203/