[React] Hooks 정리

 

React logo

 

 

React Hooks에 대해 공부하면서 간단히 정리해 봄.

공식 문서를 참고하였다.

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

 

 

기본 Hooks

• useState

const [state, setState] = useState(initialState);

상태 유지 값과 그 값을 갱신하는 함수를 반환 → 컴포넌트의 state(상태)를 동적으로 관리

setState함수는 state를 갱신할 때 사용함

 

• useEffect

useEffect(function, deps);

useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 됨 (side effect 수행)

어떤 변수가 변경될 때마다(의존성) 특정기능이 작동하도록 할 수 있음

→ deps(dependency)에 아무 것도 넣지 않으면 리렌더링 될 때마다 실행됨

→ 컴포넌트가 mount 됐을때(처음 나타났을 때) 한번만 실행하고 싶을때는 deps 위치에 빈 배열([])을 넣음

→ 특정값이 업데이트 될때 실행하고 싶을때는 deps 배열 안에 그 값을 넣어주면 됨

 

• useContext

const value = useContext(MyContext);

context 객체(React.createContext에서 반환된 값)를 받아 그 context의 현재 값을 반환함

부모 컴포넌트와 자식 컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있음 (컴포넌트를 중첩하지 않고도 전역값 쉽게 관리)

→ context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있음

 

추가 Hooks

• useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState의 대체 함수

다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호함 (복잡한 컴포넌트들의 state를 관리-분리)

→ reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

 

• useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

메모이제이션된 콜백을 반환함 (특정 함수 재사용)

불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용함

 

• useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

메모이제이션된 값을 반환 (연산한 값 재사용)

의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산함

 

• useRef

const refContainer = useRef(initialValue);

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환함

반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨

→ DOM 선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리

 

• useImperativeHandle

useImperativeHandle(ref, createHandle, [deps]);

ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)함

useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의할 수 있음

forwardRef와 함께 사용 (→ 전달받은 ref 어트리뷰트를 하부 트리 내의 다른 컴포넌트로 전달하는 React 컴포넌트를 생성함)

 

• useLayoutEffect

이 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생함

DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용

useLayoutEffect의 내부에 예정된 갱신은 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행됨

모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있음

 

• useDebugValue

useDebugValue(value);

React 개발자도구에서 사용자 Hook 레이블을 표시하는 데에 사용할 수 있음

사용자 정의 Hook의 디버깅을 도와줌