리액트 내장 훅

useRef

꼭 돔요소를 참조할 때만 사용하는 건 아니다.

UI 데이터가 아니더라도 렌더링과 상관없는 값을 저장할 때 useRef가 사용될 수 있다.

예를 들면) 값의 변화가 있어도 렌더링 결과가 같을 때는 굳이 useState보다는 useRef를 사용하는 것

이전 상태값을 기억하고 싶을 때도 useRef를 사용할 수 있다.

일반 변수로는 이전 값을 재활용할 수 없기 때문에 useRef 같은 훅을 사용할 수 있다.

useMemo

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.

useEffect와 마찬가지로 의존성 배열을 사용해서

이미 실행해둔 함수의 결과값을 저장해두고, 의존성 배열 내부 값이 변경될 때만 함수를 사용해고

값이 변경되지 않았을 때는 저장해둔 값을 재사용하는 방식

useCallback

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

useMemo 훅과 비슷하다.

특히 함수 메모이제이션에 특화된 훅이다.

useMemo와 useCallback은 비슷해서 헷갈리기 쉬운데,

useMemo는 결과'값'에 대한 상태값을 저장하고,

useCallback은 함수'자체'를 저장한다.

useReducer

여러 개의 상태값을 하나의 훅으로 관리할 때 사용하면 편하다

여러 개의 상태값으로 많은 로직을 다뤄야 할 때 사용하는데,

상태값은 객체로 다룰 수 있고,

상태값 변경 함수는 action을 발생시키는 dispatch 형태이다.

type을 통해서 여러가지 상태값을 구분해주자

useImperativeHandle

클래스형 컴포넌트의 부모컴포넌트는 ref 객체를 통해서

자식 컴포넌트의 메서드를 호출할 수 있다.

이 방식은 자식 컴포넌트의 내부 구현에 대한 의존성이 생긴다.

useImperativeHandle 훅을 사용하면 함수형 컴포넌트에서도 멤버변수(함수)를 사용할 수 있다.

즉 자식 컴포넌트가 제공하는 값을 부모 컴포넌트가 사용할 수 있는 것

useLayoutEffect

useLayoutEffect 훅은 useEffect 훅과 거의 비슷하게 동작하지만,

부수효과 함수를 '동기'로 호출한다는 것이 다르다.

즉 렌더링 결과가 돔에 반영된 직후에 바로 호출된다.

동기로 즉시 실행하기 때문에 가급적 연산이 많은 부수효과는 useEffect에서 호출하는 것이 맞다.

useLayoutEffect는 대체로 이런 경우에 사용한다.

렌더링 직후에 돔 요소의 값을 읽어들이는 경우,

조건에 따라 컴포넌트를 다시 렌더링하고 싶은 경우

 

렌더링을 하고 실제 돔에 반영은 했지만 브라우저가 화면에 돔을 그리는데 걸리는 시간이 있다.

이때 useEffect를 사용하면 비동기를 사용하기 때문에 브라우저가 화면을 그리고 나서 원하는 코드가 실행될 수도 있다.

useLayoutEffect는 브라우저가 화면을 그리기 '전에' 동기로 즉시 실행되기 때문에 좀 더 빠르게 원하는 컴포넌트 형태를

조절할 수 있는 것이다. 

useDebugValue

리액트 개발자 도구에 좀 더 많은 정보를 제공할 수 있는 훅