React - Hooks 란?

리액트를 시작하게 되면 필연적으로 Hooks를 알아야한다. Hooks란 무엇이고 어떻게 사용할까?

Hooks의 뜻

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

우리는 상태관리, 생명주기를 사용하기 때문에 class component를 사용했다. 하지만 class component에는 여러가지 문제점이 존재해 hooks가 탄생했다.

🤔 어떻게 Hooks가 등장 했을까?

Hooks가 등장하기 전에는 상태 관리나 생명 주기나 등등 여러가지 기능등을 사용하기 위해 필연적으로 class component를 사용했다. 하지만 class 컴포넌트는 여러가지 단점이 존재한다.

• 메모리 사용량이 상대적으로 높다
• 문법이 비교적 어렵다. (코드가 복잡해진다.)
• 최신 기술의 활용도가 떨어진다.
• 재활용이 불가하다.

이렇게 여러 단점을 가지고 있었지만 우리는 상태 관리, 생명 주기를 위해서 어쩔수 없이 class 를 사용 했지만 Hooks의 등장으로 functional component에서도 class component 에서 사용했던 여러가지 기능들을 사용 할 수 있게 되었다.

Hooks 종류

대표적으로 사용하는 React Hooks는 세가지 정도가 있다.

- useEffect

컴포넌트가 랜더링 될때마다 작업을 수행함. 생명 주기도 설정가능

function App() {
  const [count, setCount] = useState(0);

  const onInc = () => { 
    setCount((prev) => prev + 1); // prev는 이전 값을 의미
  };

  return (
    <div>
      <button onClick={onInc}>+ 1</button>
      <h1> Count: {count}</h1>
    </div>
  );
}

- useState

상태를 관리하여 동적인 상태로 만들어줌

export default function App() {
  useEffect(() => {
    alert("render!");
  }, []);

  return <div></div>;
}

- useContext

상태를 전역으로 관리 할 수 있게 해줌

import { createContext, useContext } from "react";

export const CountContext = createContext(null); // context 생성

function App() {
  return (
    <CountContext.Provider value={12}> // context.provider로 감싸주고 값도 지정
      <div>
        <Child />
      </div>
    </CountContext.Provider>
  );
}

const Child = () => {
  const cnt = useContext(CountContext);

  return (
    <div>
      <h1>Count : {cnt}</h1>
    </div>
  );
};

이외에서 useReducer useCallback useMemo useRef 등 여러가지 가 존재한다.