[React] React Hooks

React Hooks는 React 16.8 버전부터 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능을 사용할 수 있게 해줍니다. 이전에는 상태 관리를 위해 클래스 컴포넌트를 사용해야 했지만, Hooks를 이용하면 함수형 컴포넌트에서도 기능적으로 클래스 컴포넌트와 유사한 기능을 구현할 수 있습니다. 아래에서 React Hooks에 대해 자세히 설명하겠습니다.

---

useState Hook

useState Hook은 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. 클래스 컴포넌트의 this.state와 유사하게, useState Hook을 사용하면 상태를 정의하고 변경할 수 있습니다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위의 코드에서 useState Hook을 사용하여 count라는 상태와 setCount라는 상태를 변경하는 함수를 정의했습니다. setCount 함수를 호출하면 count 상태가 업데이트되고, 컴포넌트가 리렌더링됩니다.

---

useEffect Hook

useEffect Hook은 함수형 컴포넌트에서 라이프사이클 메서드와 비슷한 역할을 합니다. 컴포넌트가 마운트되었을 때, 업데이트되었을 때, 언마운트되었을 때 등 특정 상황에서 작업을 수행할 수 있습니다.

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <h1>Timer: {seconds} seconds</h1>
    </div>
  );
}

위의 코드에서 useEffect Hook을 사용하여 타이머를 시작하고, 컴포넌트가 언마운트될 때 타이머를 정리합니다.

---

다른 Hooks

React는 useState와 useEffect 외에도 여러 가지 빌트인 Hooks를 제공합니다. 예를 들어, useContext Hook은 Context를 사용하여 상태를 공유할 때 사용되고, useReducer Hook은 복잡한 상태 관리를 위해 사용됩니다. 추가적으로 커스텀 Hook을 만들어서 로직을 재사용할 수도 있습니다.

// Custom Hook 예시
import React, { useState } from 'react';

function useCustomCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  return [count, increment];
}

위의 코드는 useCustomCounter라는 커스텀 Hook을 만드는 예시입니다. 이렇게 작성된 커스텀 Hook을 다른 컴포넌트에서 재사용하여 상태와 기능을 공유할 수 있습니다.

---

React Hooks는 함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능을 사용할 수 있도록 해주는 강력한 기능입니다. useState, useEffect를 포함하여 다양한 빌트인 Hooks와 커스텀 Hook을 사용하여 복잡한 로직을 구현하고, 기능적으로 클래스 컴포넌트와 비슷한 효과를 얻을 수 있습니다. Hooks를 활용하여 더욱 간편하고 효율적인 React 컴포넌트를 개발해보세요!