[React] useEffect와 useState

useState

useState란?

useState는 React에서 함수 컴포넌트 내부에서 상태(state)를 관리하기 위해 사용하는 Hook입니다. 이전에는 클래스 컴포넌트에서만 상태를 관리할 수 있었지만, Hook이 도입되면서 함수 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.

 

사용법

useState는 초기 상태를 인수로 받아들이며, 현재 상태 값과 상태를 업데이트할 수 있는 함수를 배열로 반환합니다.

const [state, setState] = useState(initialValue);

 

• state: 현재 상태 값.

• setState: 상태를 업데이트하는 함수.

 

코드 예제

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  );
}

export default Counter;

 

장점

1. 간단하고 직관적인 API: 함수 컴포넌트에서 상태를 쉽게 관리할 수 있습니다.

2. 리렌더링 최적화: setState를 호출하면 필요한 부분만 리렌더링됩니다.

3. 다양한 자료형 지원: string, number, array, object 등 모든 자료형을 상태로 사용할 수 있습니다.

 

단점

1. 복잡한 상태 관리 제한: 상태가 복잡할수록 관리가 어려워질 수 있습니다.

2. 비동기 업데이트: 상태 업데이트가 비동기적으로 작동하기 때문에, 연산 결과를 즉시 확인할 수 없는 경우가 있습니다.

 

 

useEffect

useEffect란?

useEffect는 React 함수 컴포넌트에서 사이드 이펙트(side effect)를 처리하기 위해 사용하는 Hook입니다. 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업(데이터 가져오기, DOM 업데이트, 타이머 설정 등)을 수행할 수 있습니다.

 

사용법

useEffect(() => {
  // 실행할 작업
  return () => {
    // 클린업 작업
  };
}, [dependencyArray]);

 

• 첫 번째 매개변수: 수행할 작업을 정의하는 콜백 함수.

• 두 번째 매개변수: 의존성 배열(dependencyArray)로, 배열 안에 포함된 값이 변경될 때만 콜백 함수가 실행됩니다.

 

코드 예제

기본 사용

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

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 클린업
  }, []);

  return <p>타이머: {seconds}초</p>;
}

export default Timer;

 

의존성 배열 사용

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

function UserGreeting({ name }) {
  useEffect(() => {
    console.log(`안녕하세요, ${name}님!`);
  }, [name]); // name이 변경될 때만 실행

  return <p>환영합니다, {name}님!</p>;
}

export default UserGreeting;

 

장점

1. 클래스 컴포넌트보다 간단: componentDidMount, componentDidUpdate, componentWillUnmount를 하나로 통합했습니다.

2. 사이드 이펙트 처리 간소화: 데이터 패칭, 이벤트 리스너 등록 등 다양한 작업을 쉽게 구현할 수 있습니다.

3. 의존성 배열로 최적화 가능: 의존성 배열을 통해 불필요한 호출을 방지할 수 있습니다.

 

단점

1. 무한 루프 위험: 의존성 배열 설정을 잘못하면 무한히 반복 실행될 수 있습니다.

2. 가독성 저하: 복잡한 로직을 포함하면 코드가 길어지고 이해하기 어려워질 수 있습니다.

3. 의존성 관리 어려움: 상태 값이나 함수의 의존성을 놓치면 버그가 발생할 수 있습니다.

 

useState와 useEffect를 함께 사용하기

두 Hook을 조합하면 상태 관리와 사이드 이펙트를 효율적으로 처리할 수 있습니다.

코드 예제

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

function FetchData() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => console.error("Error fetching data:", error));
  }, []); // 컴포넌트가 처음 렌더링될 때만 실행

  if (loading) return <p>로딩 중...</p>;

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default FetchData;

 

결론

React에서 useState와 useEffect는 함수 컴포넌트의 필수적인 도구입니다. useState는 상태 관리를 간단하게 만들어 주고, useEffect는 사이드 이펙트를 처리하는 데 효과적입니다. 두 Hook을 적절히 활용하면 더 간결하고 유지 보수하기 쉬운 코드를 작성할 수 있습니다.

 

참고 자료

• React 공식 문서 - Hooks

• useState 공식 문서

• useEffect 공식 문서