React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(8)

React 상태 관리: useState와 useEffect

이번 강의에서는 React의 상태 관리 기초 개념인 useState와 사이드 이펙트 처리를 위한 useEffect 훅을 다룹니다. 이 두 가지 훅은 React에서 상태 변화를 관리하고 컴포넌트가 렌더링될 때 특정 동작을 처리하는 데 중요한 역할을 합니다.

React 상태 관리

---

1. useState: 상태 관리 기초

useState는 React에서 상태 관리를 위해 사용되는 훅입니다. 컴포넌트 내에서 상태 값을 설정하고, 그 상태 값을 변경할 수 있게 해줍니다. 컴포넌트는 상태가 변경될 때마다 다시 렌더링됩니다.

1.1 useState 기본 사용법

다음은 useState를 사용하여 간단한 카운터를 구현하는 예시입니다.

// Counter.js
import React, { useState } from 'react';

function Counter() {
  // count라는 상태 값과 이를 업데이트하는 setCount 함수
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={() => setCount(count + 1)}>Increment</button>
      <button className="btn btn-danger" onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

1.2 코드 설명

• useState(0): 초기 상태 값은 0으로 설정됩니다. count는 상태 값, setCount는 상태 값을 변경하는 함수입니다.
• setCount(count + 1): 버튼을 클릭할 때마다 count 값이 1 증가하고 컴포넌트가 다시 렌더링됩니다.

---

2. useEffect: 사이드 이펙트 처리

useEffect 훅은 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업(사이드 이펙트)을 수행할 수 있도록 해줍니다. 여기에는 데이터 fetching, DOM 조작, 구독 설정, 타이머 설정 등이 포함될 수 있습니다.

2.1 useEffect 기본 사용법

아래는 useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 콘솔에 메시지를 출력하고, 카운터 상태 값이 변경될 때마다 메시지를 업데이트하는 예시입니다.

// CounterWithEffect.js
import React, { useState, useEffect } from 'react';

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

  // 컴포넌트가 렌더링되거나 count 상태가 변경될 때 실행
  useEffect(() => {
    console.log(`Current count: ${count}`);
  }, [count]); // count가 변경될 때마다 useEffect 실행

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={() => setCount(count + 1)}>Increment</button>
      <button className="btn btn-danger" onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default CounterWithEffect;

예제코드 실행화면

2.2 코드 설명

• useEffect(() => {...}, [count]): count 값이 변경될 때마다 이 효과가 실행됩니다. 처음 컴포넌트가 렌더링될 때도 한 번 실행됩니다.
• 의존성 배열 [count]: count가 변경될 때만 효과가 실행되도록 합니다. 만약 빈 배열 []을 넣으면, 컴포넌트가 처음 렌더링될 때만 실행됩니다.

2.3 useEffect로 데이터 가져오기

이제 useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 API에서 데이터를 가져오는 예시를 살펴보겠습니다.

 

2.4 코드 설명

• axios.get: API에서 데이터를 가져오는 비동기 함수.
• useEffect: 컴포넌트가 처음 렌더링될 때 데이터를 가져오고, 그 결과를 data 상태에 저장.
• 빈 의존성 배열: [] 배열을 전달하면, 해당 컴포넌트가 한 번만 실행됩니다. 데이터 fetching 같은 작업에 유용합니다.
• App.js 에서 코드 실행하기

 

---

3. useState와 useEffect의 연관성

• useState: 컴포넌트 내에서 상태를 관리할 때 사용합니다. 상태가 변경될 때마다 컴포넌트는 다시 렌더링됩니다.
• useEffect: 컴포넌트가 렌더링되거나 업데이트될 때 특정 작업을 처리할 수 있도록 합니다. 상태가 변경될 때만 동작하도록 제한할 수 있습니다.

 

*** 전체 폴더 구조

my-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Counter.js
│   │   └── CounterWithEffect.js
│   ├── App.js
│   ├── index.js
│   └── styles.css
├── package.json
├── .gitignore
└── README.md

 

**** App.js

import React from 'react';
import Counter from './components/Counter';
import CounterWithEffect from './components/CounterWithEffect';

function App() {
  return (
    <div className="App">
      <h1>React 상태 관리와 사이드 이펙트 처리</h1>
      <div className="counter-section">
        <h2>useState 예제</h2>
        <Counter />
      </div>
      <div className="counter-section">
        <h2>useEffect 예제</h2>
        <CounterWithEffect />
      </div>
    </div>
  );
}

export default App;

---

결론

이번 강의에서는 React에서 상태를 관리하는 useState와 컴포넌트의 렌더링 및 업데이트 시 특정 작업을 처리하는 useEffect에 대해 학습했습니다. useState를 통해 컴포넌트의 동적인 상태를 관리할 수 있고, useEffect를 통해 컴포넌트의 라이프사이클에 맞춰 사이드 이펙트를 처리할 수 있습니다.