리액트 상태 관리: useState와 useEffect

byCode Keeper •

리액트 상태 관리: useState와 useEffect


리액트(React)는 컴포넌트 기반 구조와 가상 DOM을 통해 웹 애플리케이션을 효율적으로 구축할 수 있게 해줍니다. 리액트에서 상태 관리는 애플리케이션의 동작을 제어하는 핵심 요소 중 하나입니다. 특히, 리액트 훅(Hooks)은 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있도록 도와줍니다. 이 포스팅에서는 useState와 useEffect 훅을 사용한 리액트 상태 관리 방법에 대해 자세히 살펴보겠습니다.


리액트 훅의 개요


리액트 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다. 훅을 사용하면 클래스형 컴포넌트에서만 가능했던 기능을 함수형 컴포넌트에서도 쉽게 구현할 수 있습니다.


useState 훅을 이용한 상태 관리


useState 훅은 리액트 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 상태 변수와 상태를 갱신하는 함수를 반환합니다. 초기 상태값을 인자로 전달받아 상태를 초기화합니다.


useState 기본 사용법


import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

위 예제에서 Counter 컴포넌트는 count라는 상태를 관리하고, 버튼을 클릭할 때마다 count를 증가하거나 감소시킵니다.


복잡한 상태 관리


useState를 사용하여 객체나 배열과 같은 복잡한 상태를 관리할 수도 있습니다.


import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({
    name: 'John Doe',
    age: 25,
    location: 'Seoul'
  });

  const updateLocation = () => {
    setUser(prevUser => ({
      ...prevUser,
      location: 'Busan'
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Location: {user.location}</p>
      <button onClick={updateLocation}>Move to Busan</button>
    </div>
  );
}

export default UserProfile;

위 예제에서 UserProfile 컴포넌트는 user 객체 상태를 관리하고, 버튼을 클릭할 때 location 값을 변경합니다.


상태 초기화 및 리셋


상태를 초기화하거나 리셋하는 방법도 알아보겠습니다.


import React, { useState } from 'react';

function Form() {
  const initialState = {
    username: '',
    email: ''
  };

  const [form, setForm] = useState(initialState);

  const handleChange = e => {
    const { name, value } = e.target;
    setForm(prevForm => ({
      ...prevForm,
      [name]: value
    }));
  };

  const resetForm = () => {
    setForm(initialState);
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        value={form.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        type="email"
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <button onClick={resetForm}>Reset</button>
    </div>
  );
}

export default Form;

위 예제에서 Form 컴포넌트는 username과 email 상태를 관리하고, 입력 필드의 값을 변경하거나 리셋할 수 있습니다.


useEffect 훅을 이용한 생명주기 관리


useEffect 훅은 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있게 해줍니다. 예를 들어, 컴포넌트가 마운트될 때 데이터 가져오기, 컴포넌트가 언마운트될 때 정리 작업을 할 수 있습니다.


useEffect 기본 사용법


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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default DataFetcher;

위 예제에서 DataFetcher 컴포넌트는 useEffect를 사용하여 컴포넌트가 마운트될 때 API로부터 데이터를 가져오고, data 상태를 업데이트합니다.


의존성 배열 사용하기


useEffect 훅은 두 번째 인자로 의존성 배열을 받습니다. 배열 내의 값이 변경될 때마다 효과가 다시 실행됩니다.


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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

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

  return <p>Timer: {count}</p>;
}

export default Timer;

위 예제에서 Timer 컴포넌트는 useEffect를 사용하여 매초마다 count 상태를 증가시키는 타이머를 설정하고, 컴포넌트가 언마운트될 때 타이머를 정리합니다.


조건부 효과 실행


의존성 배열을 사용하여 조건부로 효과를 실행할 수도 있습니다.


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

function UserGreeting({ username }) {
  useEffect(() => {
    document.title = `Hello, ${username}`;

    return () => {
      document.title = 'React App';
    };
  }, [username]);

  return <p>Welcome, {username}!</p>;
}

export default UserGreeting;

위 예제에서 UserGreeting 컴포넌트는 username이 변경될 때마다 document.title을 업데이트하고, 컴포넌트가 언마운트될 때 document.title을 초기화합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 리액트의 useState와 useEffect 훅을 사용한 상태 관리 방법에 대해 살펴보았습니다. useState 훅을 사용하여 컴포넌트의 상태를 관리하고, useEffect 훅을 사용하여 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있습니다. 이를 통해 함수형 컴포넌트에서도 강력한 상태 관리와 생명주기 기능을 구현할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전