React 함수형 컴포넌트 Hook에 대해서 알아보자!

<리엑트 로고>

👉  React Hook

React의 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능(state, Lifecycle)을 사용할 수 해주는 함수이다. 즉, React state와 Lifecycle 기능을 연동(hook into) 할 수 있게 해주는 함수이다.

<React Hook Lifecycle>

React에서 Hook을 도입하게 된 목적은 여러가지가 있지만 핵심만 정리해 보았다.

🌈  문제점 1

클래스 컴포넌트 기반의 React 코드 작성 시 컴포넌트 재사용성을 위해 Render props, Higher-Order Component와 같은 패턴을 사용해 문제를 해결하였다. 하지만 이 두 가지 패턴을 사용하기 위해 엄청난 양의 감싸는 컴포넌트들이 생겨 Wrapper Hell을 만들며, 구조적 제약 및 코드 추적을 어렵게 만든다.

<Wrapper Hell 이미지 예시>

🖐 잠깐 그럼 Hook 은? 
Hook을 활용하면 상태 관련 로직을 추상화해 독립적인 테스트와 재사용이 가능해 레이어 변화 없이 재사용이 가능

🌈  문제점 2

클래스형 컴포넌트에서는 Lifecycle 메서드 기반으로 컴포넌트를 나누어야 했다. 이는 Lifecycle 메서드 안에 관련 없는 로직들도 같이 섞이게 된다. 즉, 사이드 이팩트가 발생하여 버그를 발생하며, 무결성을 해친다.

🖐 잠깐 그럼 Hook 은? 
Hook은 기존 Lifecycle 메서드 기반으로 나누는 클래스형 컴포넌트와 달리 로직 기반으로 나눌 수 있으며, 함수 단위로 세세히 나눌 수 있음

React에서 Hook을 도입하게 된 목적을 알아보았다.
그럼 이제 Hook의 종류에 대해 알아보자!

 

👉 React Hook 종류

⚡️ 1. State Hook

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

useState는 동적으로 바뀌는 값을 관리할 때 사용되며, 상태 유지 값과 그 값을 갱신하는 함수를 반환한다.
위 코드로 내용을 정리해 보면 state는 현재 상태의 변수이며, setState는 상태 값을 업데이트 해주는 Setter 함수고, useState() 안에 있는 값은 상태의 초기 값이다. useState() 안에 있는 값은 초기 렌더링 시에만 사용되며 이후의 렌더링 시에는 이 값은 무시한다. 내용을 정리하면 아래와 같다.

const [상태 값 저장 변수, 상태 값 갱신 변수] = useState(상태 초기 값);

한번 실제 아래 예시를 통해 React에서 어떤 식으로 작동하는지 알아보자.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

    1. 버튼 클릭 이벤트 등으로 setState가 호출되면 다시 function 컴포넌트가 실행되고 Virtual DOM을 리턴한다.
    2. 이전에 리턴했던 Virtual DOM과 비교해서 state 값이 달라졌다면 달라진 부분에 해당하는 실제 DOM만을 업데이트 한다.

⚡️ 2. Effect Hook

useEffect(callBackFunc, dependencies)

Effect Hook은 리엑트 컴포넌트가 렌더링 될때마다 특정 작업(side effects)을 실행할 수 있게 하는 hook이다. hook은 클래스 컴포넌트 기능을 사용하기 위해 만들어졌으므로 mount, update, unmount 되었을 때 작업을 처리할 수 있다.
위 코드로 정리해보면 callBackFunc는 수행하고자 하는 함수이며, dependencies는 배열 형태로 배열 안에서 검사하고자 하는 특정 값 또는 빈 배열이다.

useEffect로 전달된 함수는 컴포넌트 렌더링 -> 화면 업데이트 -> useEffect실행 순서로 실행된다. 즉, 최초 렌더링 이후에 실행된다.

그럼 Effect Hook는 어떤 형태들이 있는지 한번 알아보자.

 

🌈  1. Component가 마운트가 되었을 때만 실행 (최초 렌더링 되었을 때)

useEffect(() => {
  console.log('렌더링 될 때마다 실행');
});

🖐 클래스 컴포넌트로 설명하면 componentDidMount(), componentDidUpdate(), componentWillUnmount(), getDerivedStateFromProps() 실행한 것과 같다.

 

🌈  2. Component가 최초 렌더링 될 때마다 실행

useEffect(() => {
  console.log('최초 컴포넌트가 마운트 될 때 한번만 실행');
},[]);

🖐 클래스 컴포넌트로 설명하면 componentDidMount() 역할을 수행한다.

 

🌈  3. Component가 특정 props, state가 업데이트 될 때 실행

useEffect(() => {
  console.log('특정 props 및 state 업데이트 될 때 실행');
}, [name]);

🖐 클래스 컴포넌트로 설명하면 componentDidUpdate(), getDerivedStateFromProps() 역할을 수행한다.

 

🌈  4. Component가 종료될 때 실행

 useEffect(() => {
    return () => {
      console.log('컴포넌트가 Unmmount될 때 정리 또는 unscribe 해야할 것들을 처리');
    };
  });

🖐 클래스 컴포넌트로 설명하면 componentWillUnmount() 역할을 수행한다.

 

❗️ Hook 사용 규칙 두가지

  - 최상위에서만 Hook을 호출해야한다. -> 반복문, 조건문 혹은 중첩된 함수 내에서 호출 X
이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.

  - 오직 리액트 함수 컴포넌트에서만 Hook을 호출해야하며, 일반 JavaScript 함수에서는 Hook을 호출하면 안된다.

🖐 eslint-plugin-react-hooks 라는 ESLink 플러그인을 사용하여 위 두 가지 규칙을 강제하자!

 

오늘은 리엑트 hook에 대해서 알아보았다.

긴글 읽어주셔서 감사합니다.
모두 해피 코딩하세요~