오늘 면접을 보고왔는데, 기술면접을 보던 중 React Hooks에 대한 질문을 받았는데, 대답을 제대로 하지 못한 부분이 있어서 이를 회고할 겸 모든 React Hooks에 대해 총 정리를 해보려고 한다.

React Hook 이란?

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

• 리액트 16.8버전에 추가된 공식 라이브러리이다.
• 클래스형 컴포넌트에서만 쓸 수 있던 state와 라이프사이클을 함수형 컴포넌트에서도 사용이 가능하다.
• 현재 공식문서 상 클래스형 컴포넌트 보다는 함수형 컴포넌트가 권장된다.

React Hook이 필요한 이유?

Hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기 때문에, 클래스형 컴포넌트에서만 사용할 수 있던 상태관리를 더 손쉽게 할 수 있어 필요하다.

• 함수형 컴포넌트들은 기본적으로 리렌더링 될 때, 함수 안에 작성된 모든 코드가 다시 실행된다.

• 클래스형 컴포넌트들은 메서드의 개념으로, 리렌더링이 되더라도 render()를 제외한 나머지 메서드 및 state는 그대로 보존이 되어 있다.

• 이는 함수형 컴포넌트들이 기존에 가지고 있던 상태를 전혀 관리할 수 없게 만든다.

• 하지만 Hook의 등장으로, 브라우저에 메모리를 할당함으로써, 함수형 컴포넌트가 상태를 가질 수 있게 된 것이다.

공식홈페이지에 따른 Hook을 만든 이유
1. 컴포넌트 사이에서 상태 로직 재사용이 어렵다. (render props, HOC 등)
2. 클래스형 컴포넌트들은 진입장벽이 너무 높다.
3. 각종 생명주기 함수들 또한 이해하기 어렵다.

Hook의 사용 규칙

• 최상위에서만 Hook을 호출한다.
  • 컴포넌트의 최상위에서만 Hook호출이 가능하다는 말이다.
• Hook을 만들 때 앞에 use를 붙힌다.
  • 한눈에 봐도 Hook 규칙이 적용되는지 파악할 수 있기 때문이다.
• Hook은 호출되는 순서에 의존한다.
  • 한 컴포넌트에서 여러개의 hook이 사용되는 경우 위에서 아래로 컴파일한다.

Hook의 종류!!

• useState()
  • 설정할 state값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.
  • 이 함수는 클래스 컴포넌트에서의 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 존재하고, 인자로 초기 state설정값을 하나 받는다.
  • 이 초기값은 첫번째 렌더링 시에 한번 사용된다.

const [text, setText] = useState("")

• useEffect()
  • 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
  • useEffect를 사용하면 함수형 컴포넌트에서도 side effect를 사용할 수 있다.
  • 첫번째 인자는 함수, 두번째 인자는 의존성 배열이 들어간다.
  • 즉, 라이프사이클 훅을 대체할 수 있다.

// 아래 코드는 실시간으로 db의 변화나 get 요청이 실행될 때 마다 렌더링 시켜주는 코드입니다.
// 두번째 인자에 함수나, state값을 넣어 해당 값이 수정사항이 생길 때 마다 렌더링을 해줍니다.
const [data, setData] = useState([]);
  useEffect(() => {
    // 실시간 db변화 감지 및 get요청
    dbService.collection("datas").onSnapshot((snapshot) => {
      const dataArray = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setData(dataArray);
    });
  }, []);

• useContext()
  • 필요한 props를 글로벌하게 사용할 수 있게 도와준다.
  • props가 2중, 3중 그 이상으로 넘겨받아져야 하는 상황에 사용하기 좋다.

// 사용예시

// App.js
import React, { createContext } from "react";
import Children from "./Children";

// AppContext 객체를 생성한다.
export const AppContext = createContext();

const App = () => {
  const user = {
    name: "안치영",
    job: "개발자"
  };

  return (
    <>
      // 아래 Provider에 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
      <AppContext.Provider value={user}>
        <div>
          <Children />
        </div>
      </AppContext.Provider>
    </>
  );
};

export default App;


// Children.js
import React from "react";
import { AppContext } from "./App";

const Children = () => {
  const user = useContext(AppContext);
  return (
          <>
            <h3>이름은 {user.name}입니다.</h3> // 이름은 안치영입니다.
            <h3>직업은 {user.job}입니다.</h3> // 이름은 개발자입니다.
          </>
  );
};

export default Children;

위 예시에서는 하나의 컴포넌트에서만 props를 받아 사용했지만, 여러개의 컴포넌트에서 props를 사용할 경우 유용한 Hook 입니다.

이번 글에서는 여기까지만 정리하고 다음 글에서는

useReducer (복잡한 컴포넌트들의 state를 관리 및 분리)
useCallback (특정 함수 재사용)
useMemo (연산한 값 재사용)
useRef (DOM선택, 컴포넌트 안에서 조회 및 수정할 수 있는 변수관리)
useImperativeHandle
useLayoutEffect
useDebugValue

에 대해서 정리할 예정입니다.

React Hooks에 대해서 정리를 하는 과정에, 내가 몰랐던 Hook들도 꽤나 있어서 한번씩 정리하고, 읽어보는게 많은 도움이 될 것 같다.