React Hook 알아보기

* 목차 

 - Intro

 - Hook이란?

 - React 18에서 제공하는 Hook의 종류

 - 마치며

 

---

Intro

* react18.2.0 version를 기준으로 설명합니다.

React의 특징으로는 3가지를 뽑을 수 있습니다.

1. jsx 문법
2. Hook
3. 가상 DOM

이 3가지에 대해서는 기본적으로 알고 있다고 생각하고 글을 작성하도록 하겠습니다. 만약 이 3가지의 개념이 없으신 분들은 먼저 이 글을 읽어보시길 바랍니다.

React란?

 

 

이번 글에서는 React의 Hook에서 대해서, 특히 useState에 대해서 알아보겠습니다. 가장 기본적으로 사용되는 React hook이라 할 수 있는데요. 이 useState가 어떻게 동작하는지 자세히 알아보겠습니다.

 

 

---

Hook이란?

Hook은 무엇일까요? Hook을 직역하면 "갈고리" 라는 뜻입니다. 마치 후크 선장의 갈고리 의수를 떠올리게 되네요. react에서 hook은 hook into에서 따왔다고 합니다. hook into는 "~에 연결하다", 혹은 "연동" 이라는 의미를 가지고 있습니다. 이 Hook을 사용하면 Functional component에 변수를 연결하여 lifecycle을 관리할 수 있습니다.

 

Functional component는 뭘까요? 바로 함수로 작성된 component를 의미합니다. 그러면 react는 functional component 외에 다른 component도 있는 것일까요?

 

사실 16버전의 react까지는 class형 component가 대세였습니다.

import React from "react";

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);

    // 상태 초기화
    this.state = {
      clickCount: 0,
    };
  }

  // 컴포넌트가 마운트되거나 업데이트될 때 실행될 메서드를 정의.
  componentDidMount() {
    console.log("Component mounted or updated!");
  }

  // 버튼 클릭 시 클릭 횟수를 증가.
  handleClick = () => {
    this.setState((prevState) => ({
      clickCount: prevState.clickCount + 1,
    }));
  };

  render() {
    return (
      <div>
        <h1>Class Component</h1>
        <p>Click Count: {this.state.clickCount}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default ClassComponent;

 

Class component를 구현했다.

 

 

 

Class component를 사용하면 변수를 object에 지속적으로 저장, 관리할 수 있게 됩니다. 하지만 Class component는 render(), constructor(), setState()등 여러 lifecycle을 사용해야 했기 때문에 코드가 복잡해 지기 쉽습니다. 그리고 Side Effect를 제어하는데 어려움이 있고, class는 결국 객체 지향 설계가 주를 이루게 되어 엄밀한 설계가 아니면 관리하기가 매우 어려웠습니다. 그리고 Web 프로그래밍인 javascript은 언어 자체가 엄밀함과는 거리가 멀었죠.

 

이런 여러가지 이유로 React는 16.8 version 부터 functional component를 도입하기 시작했습니다. 위의 동작과 동일한 functional component는 다음과 같이 작성됩니다.

import { useState, useEffect } from "react";

const FunctionalComponent = () => {
  // useState를 사용하여 클릭 횟수 상태를 관리.
  const [clickCount, setClickCount] = useState(0);

  // useEffect를 사용하여 컴포넌트가 마운트되거나 업데이트될 때마다 실행될 효과를 정의.
  useEffect(() => {
    console.log("Component mounted or updated!");
  });

  // 버튼 클릭 시 클릭 횟수를 증가.
  const handleClick = () => {
    setClickCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Functional Component</h1>
      <p>Click Count: {clickCount}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default FunctionalComponent;

 

Functional Component 구현 결과이다. 사실상 위의 Class Component와 동일하다.

 

functional Component 안에 useState를 통해 초기화를 하고, set 함수를 활용하여 value를 관리합니다. 기능적으로 매우 간편해 졌습니다.

 

이렇게 Class 단위의 객체 내 변수 lifecyle 기능을 Class없이 functional component만으로 쉽게 관리할 수 있도록 해주는 것이 바로 Hook입니다. 그래서 Hook을 처음 배울 때는 보통 useEffect(Component lifecyle), useState(Data lifecyle)를 사용하여 마치 functional component를 class처럼 사용할 수 있게 됩니다.

 

---

React 18에서 제공하는 Hook의 종류

Hook을 한 문장으로 정리하자면, Class를 쓰지 않고도 lifecycle을 관리할 수 있도록 functional component를 위한 도구라고 할 수 있겠습니다. 공식문서에서 언급것을 본적은 없지만 약간 설탕문법(Syntax Sugar) 처럼 느껴지기도 합니다.

 

react18에서 현재 지원하고 있는 hook은 다음과 같습니다. 필자가 주로 사용한 Hook은 Bold 처리했습니다.

 

• useCallback : re-rendering 사이에 함수 정의를 cache할 수 있는 Hook (최적화)
• useContext : Context APi를 아용히여 Component간의 데이터를 전달하는 Hook (데이터 상태 관리)
• useDebugValue : React 개발자 도구에서 사용자 정의 Hook에 label을 추가할 수 있는 Hook
• useDeferredValue : UI의 일부 update를 지연(defer)시킬 수 있는 Hook
• useEffect : Component의 생성, 업데이트,  제거시 작업을 수행하는 Hook (Component 상태 관리)
• useId : unique한 ID를 생성해 접근 가능한 attribute를 전달할 수 있는 Hook
• useImperativeHandle : ref attribute로 노출된 handle을 다룰 수 있는 Hook
• useInsertionEffect : (CSS-in-JS 라이브러리 작성자만 해당). DOM 변화 이전에 실행되는 useEffect version
• useLayoutEffect : (성능 이슈가 있을 수 있습니다. 최대한 useEffect를 우선 활용합시다) Browser가 repainting하기 전에 실행되는 useEffect version
• useMemo : re-rendering 사이에 계산 결과를 Cache할 수 있는 Hook (최적화)
• useReducer : Component에 감속기(reducer)를 추가 할 수 있는 Hook (데이터 상태 관리)
• useRef : 랜더링에 필요하지 않는 값을 참조할 수 있는 Hook (최적화)
• useState : Component에 데이터 상태관리를 추가할 수 있는 Hook (데이터 상태 관리)
• useSyncExternalStore : External Store의 데이터를 받을 수 있는 Hook
• useTransition : UI를 차단하지 않고 상태를 업데이트 할 수 있는 Hook

 

 

현재 제공되고 있는 Hook은 총 15개 입니다. 그 중에 제가 잘 사용하는 hook은 그 중에 절반정도인 8개입니다. 그리고 이 8개는 크게 3가지로 나눌 수 있습니다.

• 데이터 상태관리 : useContext, useReducer, useState
• Component 상태관리 : useEffect
• 최적화 : useCallback, useMemo, useRef

 

이 3가지 개념만 확실히 익히기만 해도 React로 Web application을 만드는데 전혀 문제가 없을 것입니다. 

 

---

마치며

React의 3가지 기본 개념 중 Hook은 Web application을 설계하는데 매우 직접적인 개념입니다. 사실 Web에서 javascript 기능 없이 index.html만 간단하게 디자인 적으로 제공한다면 Hook은 필요 없을지도 모릅니다. 하지만 Web에서 Data가 DB에 접근 없이 Browser상에서 Data가 원하는 대로 handling되고 url 변화 없이 component가 생성, 업데이트, 삭제가 원활하게 이루어지기를 원하신다면 Hook을 잘 익히셔야 할 겁니다.

 

다음 글에서는 React의 useState에 대해서 알아보겠습니다.

 

---

* reference

https://react.dev/reference/react

https://react.vlpt.us/basic/