해당 시리즈의 포스트는 개념 및 이론 정리와 개인적인 코딩 기록이 혼용되어 포스팅됩니다. 참고 부탁드립니다.

---

리액트를 공부하면서 useState, useEffect 등의 기능들을 익힐 수 있었는데, 이 기능들은 원래 초기 ReactJS부터 있던 기능이 아니라 차후 편의성과 효율의 증대를 위해 추가된 기능들이다.

이러한 Hooks엔 어떤 것들이 있고, 이 기능들의 정확한 의미를 어떤 것인지 알아보자.

📌 Hooks란?

Hook은 React의 버전 16.8부터 새로 추가되었다. Hooks의 등장으로 기존에 class형 컴포넌트를 이용한 개발 방식에서 벗어날 수 있었다.

특히 비슷한 로직 연관성을 지닌 함수끼리 묶였다는 것에서 큰 의미를 지니는데 이는 React사이트의 Hooks motivation문서에서 참고토록 하자.

📌 Hook의 종류

1. useState

먼저 state를 관리할 수 있도록 해주는 useState가 있다. 이 함수를 이용해 우리는 현재의 state값과 이 state를 업데이트시키는 함수를 함께 묶어서 만들어낼 수 있다.

📢 예시

	const [movie, setMovie] = useState([]);

그리고 이렇게 만들어진 업데이트 함수는 다른 곳에서 호출하여 사용 가능하다.

useState는 인자로 초기값을 받으며, 이 초기값은 렌더링에만 딱 한번 사용된다.

2. useEffect

useEffect는 다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 작업을 일컫는 side effects 를 수행할 수 있도록 해준다.

ex) 데이터 가져오기, 구독, DOM조작

📢 예시

useEffect(() => {
  window.addEventListener("scroll", () => {
    if (window.scrollY > 50) {
      setShow(true);
    } else {
      setShow(false);
    }
  });

  return () => {
    window.removeEventListener("scroll", () => {});
  };
}, []);

이러한 useEffect는 React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되며,
이러한 기능을 하나의 API로 통합한 것이라고 할 수 있다.

useEffect를 이용하면 React는 DOM을 바꾼 뒤 이 effect함수를 실행할 것이다.

이는 컴포넌트 안에서 선언되어 있기 때문에 props나 state에 접근 가능하다. 또한 첫 렌더링을 포함하여 매 렌더링 이후에 effect함수가 실행된다.

3. .etc

이 외에도 다른 Hooks와 직접 만들어서 사용하는 custom Hook이 존재한다.
이는 다음에 자세히 알아보도록하자.

또한 useState와 useEffect의 자세한 사용법도 따로 정리하도록 할 것이다.

📌 Hook 사용 규칙

Hook은 두가지 규칙이 지켜져야 한다.

1. 최상위에서만 호출되어야 한다.

   • 반복문, 조건문, 중첩함수 내에서 실행하지 말 것

2. React컴포넌트 내에서만 Hook을 호출해야한다.

   • 일반 JS함수 내에서는 호출하지 말 것
   • 예외
     직접 만든 custom Hook를 만들때 이 안에서는 호출 가능
     

---

• 출처: React의 Hook소개 및 개요
  
  

잘못된 부분에 대한 지적은 얼마든지 환영입니다.
감사합니다.