📘React Hook이란?

React Hook은 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리 및 여러 React의 기능들을 사용할 수 있게 해주는 함수들입니다. 이전에는 클래스 컴포넌트에서만 상태 관리나 생명주기 기능을 사용할 수 있었지만, Hook을 통해 함수형 컴포넌트에서도 이러한 기능들을 쉽게 사용할 수 있게 되었습니다.

📌React Hook 규칙

1. 최상위에서만 Hook을 호출해야 한다.

Hook은 React 함수 컴포넌트의 최상위 레벨에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안 된다. 이 규칙은 Hook이 매 컴포넌트 렌더링마다 동일한 순서로 호출되어야 한다는 것을 보장하기 위함이다. 이러한 일관성은 React가 내부적으로 각 Hook의 상태를 올바르게 추적하는 데 필요하다.

2. 리액트 함수 내에서만 Hook을 호출해야 한다.

Hook은 React의 함수 컴포넌트 내부 또는 다른 Hook(Custom Hook) 내부에서만 호출해야 합니다. 일반 JavaScript 함수에서 React Hook을 호출해서는 안 됩니다. 커스텀 Hook을 통해 로직을 재사용할 수 있으며, 이는 Hook의 규칙을 준수하는 한 방법입니다.

📚대표적인 React Hook

1. useState

useState는 React에서 함수형 컴포넌트의 상태 관리를 위해 제공하는 Hook이다. 이를 통해 클래스 컴포넌트에서만 가능했던 상태 관리 기능을 함수형 컴포넌트에서도 사용할 수 있게 되었다. useState는 현재 상태를 나타내는 state값과 이 상태를 업데이트하는 setState값을 쌍으로 제공한다.

기본 사용법

useState 함수는 초기 상태를 인자로 받고, 배열을 반환한다. 이 배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 그 상태를 업데이트 하는 함수이다.

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
      </button>
    </div>
  );
}

주요 특징

• 초기 상태 설정: useState에 전달된 인자는 상태의 초기값으로 설정된다. 이 값은 첫 번째 렌더링에만 사용된다.
• 상태 업데이트 함수: 예제에서 setCount와 같은 상태 업데이트 함수를 사용하여 상태를 비동기적으로 업데이트 할 수 있다. 이 함수에 새 상태값을 전달하거나, 현재 상태를 기반으로 새 상태를 반환하는 업데이터 함수를 전달할 수 있다.
• 함수형 업데이트: 상태 업데이트 함수에 함수를 전달하면, 이전 상태값을 받아 새 상태값을 반환할 수 있다. 이는 성능 최적화나 연속된 상태 업데이트에서 유용하게 사용된다.
• 렌더링 최적화: React 상태가 변경될 때마다 관련 컴포넌트를 재렌더링한다. 하지만 이전 상태와 동일한 값을 설정하면 React는 불필요한 렌더링을 스킵할 수 있다.

2. useEffect

useEffect는 React의 함수형 컴포넌트에서 부수 효과(side effects)를 수행하기 위한 Hook이다. 클래스 컴포넌트의 생명주기 메소드인 componentDidMount, componentDidUpdate, componentWillUnmount에 해당하는 기능을 함수형 컴포넌트에서 구현할 수 있게 해준다. useEffect를 사용하면 데이터 fetching, 구독 설정 및 해제, 수동으로 DOM 조작하는 등의 작업을 수행할 수 있다.

기본 사용법

useEffect는 두 개의 인자를 받는다. 실행할 부수 효과 함수와, 해당 효과의 실행이 의존하는 값들의 배열(의존성 배열)이다. 의존성 배열은 선택적으로 제공할 수 있으며, 제공하지 않을 경우 컴포넌트가 렌더링될 때마다 부수 효과가 실행된다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  // 컴포넌트가 렌더링될 때마다 실행된다.
  useEffect(() => {
    // 문서 제목을 업데이트 한다.
    document.title = `You Clicked ${count} times`;
    // count가 의존성 배열이 되고 count가 바뀔 때만 이 효과를 재실행한다.
  }, [count]); 
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click
      </button>
    </div>
  );
}

클린업 함수(Cleanup Function)

useEffect에서 반환할 수 있는 클린업 함수는 컴포넌트가 언마운트되기 전이나, 다음 부수 효과가 실행되기 전에 필요한 정리(clean-up) 작업을 수행할 때 사용된다. 주로 이벤트 리스너의 제거, 타이머의 취소, 구독 해제 등에 사용된다.

useEffect(() => {
  const subscription = dataSource.subscribe();
  return () => {
    // 클린업 함수에서 구독을 해제한다.
    subscription.unsubscribe();
  };
}, [dataSource]);

주요 특징

• 컴포넌트 렌더링 이후 실행: useEffect 내부에 정의된 부수 효과 함수는 컴포넌트의 렌더링 결과가 화면에 반영된 후에 실행된다. 이는 렌더링을 방해하지 않는 비동기적 실행을 보장하며, 이로 인해 성능 저하를 최소화할 수 있다.
• 의존성 배열(Dependency Array): useEffect는 선택적인 두 번째 인자로 의존성 배열을 받을 수 있다. 이 배열 내에 명시된 변수들 중 하나라도 변경되면, 'useEffect'에 전달된 함수가 재실행된다. 배열이 비어 있으면, 효과 함수는 컴포넌트가 마운트될 때 딱 한 번만 실행되며, 언마운트될 때 클린업 함수가 실행된다.
• 클린업 함수(Cleanup Function): useEffect에서 반환할 수 있는 클린업 함수를 통해 부수 효과 함수에 의해 생성된 구독(subscriptions), 타이머, 수동적인 이벤트 리스너 등을 정리할 수 있다. 이 클린업 함수는 컴포넌트가 언마운트되기 전이나, 효과가 다시 실행되기 전에 호출된다.
• 조건부 실행: 의존성 배열을 활용함으로써, useEffect 내의 로직을 조건부로 실행할 수 있다. 이는 성능 최적화에 매우 중요한 부분이며, 불필요한 효과 실행을 방지하여 애플리케이션의 효율성을 높일 수 있다.

3. useRef

useRef는 React의 함수형 컴포넌트에서 ref를 생성하고 접근하기 위한 Hook이다. useRef는 DOM 요소나 컴포넌트 인스턴스에 직접적으로 접근할 필요가 있을 때 유용하게 사용된다. useRef는 변경 가능한 .current 속성을 가진 객체를 반환하며, 이 객체는 컴포넌트의 전체 생명 주기 동안 유지된다.

기본 사용법

useRef를 사용하여 ref 객체를 생성하고, 이 객체를 원하는 DOM 요소의 ref 속성에 할당함으로써 해당 DOM 요소에 접근할 수 있다. 생성된 ref 객체의 .current 속성은 할당된 DOM 요소를 직접 가리킨다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);  // ref 객체 생성
  
  const onButtonClick = () => {
    // 현재 ref가 가리키는 DOM 요소에 직접 접근
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

주요 특징

• 직접적인 DOM 접근: 함수형 컴포넌트에서 DOM 요소나 React 컴포넌트 인스턴스에 직접적으로 접근할 수 있게 해준다.
• 변경 가능한 객체: useRef는 .current 프로퍼티를 가진 변경 가능한 객체를 반환한다.
• useRef로 생성된 객체의 .current 속성을 변경해도 컴포넌트는 리렌더링되지 않는다. 이는 상태(state)와 다른점이다.

useRef는 React에서 제공하는 다양한 Hook 중 하나로, 특히 DOM 요소에 직접 접근이 필요한 상황이나, 렌더링 사이에 데이터를 유지해야 하는 경우에 매우 유용하게 사용될 수 있다.