React Hook

React Hook  이란?

리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

 

Hook의 규칙

반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함
컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀)

 

대표적인 React Hook?

1. useState

상태(state)값을 추가하고 setter을 이용해 변경할 수 있도록 하는 대표적인 기능입니다.

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

 

2. useEffect

화면이 렌더링 될 때마다, 특정 작업을 실행 할 수 있도록 하는 Hook입니다. 이를 통해 컴포넌트에서 Side Effect(리액트 외부의 값이나 상태를 변경할 때)를 사용 할 수 있게 됐을 뿐만 아니라,  페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리해준다.

useEffect(() => {
  // ...
}, []);

 

3. useRef

Ref는 reference(참조)의 줄임말로,  ui에서 내가원하는 태그에 접근할 수 있으며 useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있습니다.

컴포넌트가 특정 정보를 ‘기억’하도록 하고 싶지만 해당 정보가 새 렌더링을 촉발하지 않도록 하려는 경우 ref를 사용할 수 있습니다.

null로의 초기화는 명시적인 표현입니다.

const ref = useRef();

// ...

return <div ref={ref}>안녕 리액트!</div>;

 

4. useCallback

리액트의 렌더링 성능을 위해 제공되는 훅으로 함수를 매번 새로 생성하는 것이 아니라 디펜던시 리스트가 변경될 때만 함수를 생성합니다.

메모이제이션된 콜백 함수를 생성합니다. 이는 주로 자식 컴포넌트에 props로 전달되는 콜백 함수가 불필요하게 매번 새로 생성되는 것을 방지하고자 할 때 사용됩니다. 즉, 동일한 함수를 재사용하고자 할 때 유용합니다.

const handleLoad = useCallback((option) => {
  // ...
}, [dep1, dep2, dep3, ...]);

 

import React, { useCallback } from 'react';

const ParentComponent = () => {
  // 부모 컴포넌트에서 상태를 정의하고, 콜백 함수를 생성
  const [count, setCount] = React.useState(0);

  // useCallback을 사용하여 자식 컴포넌트로 전달될 콜백 함수를 메모이제이션
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 의존성 배열에 count를 포함

  return <ChildComponent onIncrement={increment} />;
}

const ChildComponent = ({ onIncrement }) => {
  // 자식 컴포넌트에서 전달받은 콜백 함수를 사용
  return (
    <button onClick={onIncrement}>
      Increment
    </button>
  );
}

 

+ Custom Hook

자주 사용하는 Hook 코드들을 모아서 함수로 만들 수 있는데, 이때 useOOO 처럼 반드시 맨 앞에 use 라는 단어를 붙여서 다른 개발자들이 Hook이라는 걸 알 수 있게 해줘야 합니다.

 

 

• "사이드 이펙트" : useEffect 내에서 발생하는 외부의 변화나 작용을 말합니다. 이는 주로 데이터 Fetching, 구독 설정, 수동으로 DOM을 수정하는 것 등을 포함합니다.
• "의존성 배열" : useEffect에서 감시할 상태 변수들의 배열을 지정하는 것을 말합니다. 이 배열에 포함된 변수들 중 하나라도 값이 변경되면 useEffect가 다시 실행됩니다.