[리액트 6] useState, useEffect

// React의 Hooks API 중. useState, useEffect와 같은 기본 Hooks부터 설명 부탁드려요.

 

React Hooks는 React 16.8에서 도입된 새로운 기능으로, 함수형 컴포넌트에서도 상태 관리와 라이프 사이클 기능을 사용할 수 있게 해주는 API입니다. 여기서는 가장 기본적인 두 가지 Hooks, useState와 useEffect에 대해 알아보겠습니다.

 

1. useState

useState는 가장 기본적인 Hook으로, 함수형 컴포넌트에서 상태를 가질 수 있게 해줍니다.
useState는 하나의 상태 값과 이 상태를 업데이트하는 함수를 쌍으로 제공합니다.

다음은 useState의 기본적인 사용 예제입니다:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

export default Counter;

위 코드에서 useState(0)는 상태의 초기값을 0으로 설정하고, count는 현재 상태값, setCount는 상태를 업데이트하는 함수입니다.
버튼을 클릭할 때마다 increment 함수가 호출되어 상태가 업데이트되고 컴포넌트가 재렌더링됩니다.

2. useEffect

useEffect Hook은 함수형 컴포넌트에서 side effect를 수행할 수 있게 해줍니다.
이는 데이터 fetching, 구독, 또는 수동으로 React 컴포넌트의 DOM을 변경해야 하는 경우와 같은 side effect를 수행할 수 있습니다.

 

useEffect는 두 개의 인자를 받습니다. 첫 번째 인자는 side effect를 수행하는 함수이고, 두 번째 인자는 dependency array입니다. 이 배열에 명시된 값이 변경되었을 때만 side effect가 수행됩니다. 배열이 비어 있으면 컴포넌트가 처음 렌더링될 때 한 번만 수행됩니다.

다음은 useEffect의 기본적인 사용 예제입니다:

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

function User({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`https://api.example.com/user/${userId}`);
      const data = await response.json();
      setUser(data);
    };
    
    fetchUser();
  }, [userId]); // Only re-run the effect if userId changes

  return (
    <div>
      {user ? <p>{`User name: ${user.name}`}</p> : 'Loading...'}
    </div>
  );
}

export default User;

위 코드에서 useEffect Hook은 userId prop이 변경될 때마다 사용자 데이터를 가져옵니다.
가져온 데이터는 상태를 업데이트하고 컴포넌트를 재렌더링합니다.

이처럼 useState와 useEffect는 함수형 컴포넌트에서 상태 관리와 라이프사이클 메소드를 대체하며,
더 간결하고 명확한 코드를 작성할 수 있게 해줍니다.