React 상태 관리: 상태 변화에 따른 UI 자동 갱신(3)

React 상태 관리: 상태 변화에 따른 UI 자동 갱신

React에서의 **상태 관리(state management)**는 컴포넌트의 핵심입니다. 컴포넌트는 고유의 상태를 가질 수 있으며, 이 상태가 변화할 때마다 React는 자동으로 UI를 갱신합니다. 이는 전통적인 웹 개발 방식에서 직접적으로 DOM을 조작하던 방식과 큰 차이가 있습니다. React에서는 상태 변화가 UI 업데이트를 자동으로 처리해주기 때문에, 개발자는 더 직관적으로 애플리케이션의 동작을 관리할 수 있습니다.

이번 글에서는 React의 상태 관리를 useState, useEffect와 같은 React Hooks를 통해 설명하며, 실제 사례와 예제를 중심으로 알아보겠습니다.

React의 상태 관리

---

1. 상태(state)란 무엇인가?

**상태(state)**는 컴포넌트의 동적인 데이터를 나타냅니다. 예를 들어, 사용자가 버튼을 클릭하거나 입력한 값을 실시간으로 표시해야 할 때 상태를 사용하여 이를 관리할 수 있습니다.

상태 관리의 기본 원칙

• 상태는 컴포넌트가 기억하는 데이터입니다.
• 상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트가 다시 렌더링됩니다.
• React는 상태 변화를 감지하고, 필요한 부분만 UI를 업데이트합니다.

전통적인 방식과의 차이점

전통적인 방식에서는 사용자가 입력을 하거나 특정 이벤트가 발생할 때, DOM을 직접 조작하여 UI를 업데이트해야 했습니다. 하지만, React에서는 상태가 변경될 때 자동으로 UI가 업데이트되므로, 더 간결하고 유지 보수가 쉬운 코드를 작성할 수 있습니다.

---

2. useState로 상태 관리하기

React에서 가장 기본적인 상태 관리 훅(Hook)은 useState입니다. 이를 통해 컴포넌트가 상태를 가지고, 그 상태를 변경할 수 있게 됩니다.

useState 기본 사용법

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 이를 변경할 setCount 함수를 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

export default Counter;

코드 설명

• useState(0): 상태 초기값을 0으로 설정합니다.
• count: 현재 상태값을 나타냅니다.
• setCount: 상태를 변경할 때 사용하는 함수입니다.
• onClick={() => setCount(count + 1)}: 버튼 클릭 시 상태를 업데이트하며, React가 자동으로 UI를 다시 렌더링합니다.

상태 관리의 장점

• UI는 상태에 따라 자동으로 갱신되므로, 별도의 DOM 조작이 필요 없습니다.
• 상태는 함수 컴포넌트 내부에서만 관리되므로, 지역적인 상태 관리가 가능합니다.

---

3. useEffect로 사이드 이펙트 처리하기

상태 변화에 따라 비동기 작업이나 DOM 조작이 필요할 때, React에서는 useEffect 훅을 사용합니다. 이를 통해 컴포넌트가 렌더링될 때, 또는 상태나 props가 변경될 때 특정 작업을 수행할 수 있습니다.

useEffect 기본 사용법

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

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

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

    // 컴포넌트가 언마운트될 때 실행될 정리(cleanup) 함수 반환
    return () => clearInterval(interval);
  }, []);

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

export default Timer;

코드 설명

• useEffect: 컴포넌트가 처음 렌더링될 때 실행됩니다.
• setInterval: 1초마다 상태를 업데이트하며, 상태가 변경될 때마다 React가 UI를 자동으로 갱신합니다.
• return () => clearInterval(interval): 컴포넌트가 사라질 때 타이머를 정리합니다. 이는 메모리 누수를 방지하기 위한 정리 작업입니다.

useEffect의 의존성 배열

• useEffect(() => { ... }, []): 두 번째 인자인 빈 배열은 컴포넌트가 처음 마운트될 때만 useEffect가 실행되도록 합니다.
• useEffect(() => { ... }, [count]): 배열에 특정 값을 넣으면, 그 값이 변경될 때만 useEffect가 실행됩니다.

---

4. 상태 관리 예제: Todo 리스트 구현

상태 관리를 이해하기 위해 Todo 리스트를 간단히 구현해보겠습니다. 사용자가 입력한 할 일 목록을 관리하고, 삭제할 수 있는 기능을 만들겠습니다.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);  // 할 일 목록 상태
  const [inputValue, setInputValue] = useState('');  // 입력 필드 상태

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');  // 입력 필드 초기화
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={addTodo}>추가</button>
      
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

코드 설명

• todos: 할 일 목록을 관리하는 상태입니다.
• inputValue: 입력 필드의 상태를 관리합니다.
• addTodo: 입력한 값을 상태에 추가하고, 리스트를 업데이트합니다.
• removeTodo: 선택한 항목을 삭제하는 기능입니다.

결과

이 예제에서는 useState를 사용하여 할 일 목록과 입력값을 상태로 관리하고, 사용자가 입력한 값을 실시간으로 화면에 반영합니다.

---

5. 상태 관리가 가져오는 이점

5.1 UI와 로직의 일관성

상태는 UI와 로직을 일관되게 유지할 수 있는 수단입니다. 상태가 변경되면, React는 자동으로 UI를 갱신하여 사용자에게 최신 정보를 표시합니다. 이를 통해 개발자는 DOM을 직접 조작할 필요 없이, 데이터와 UI의 일관성을 유지할 수 있습니다.

5.2 코드의 간결함

상태 관리 덕분에 복잡한 DOM 조작이 사라지고, 간결한 코드로 복잡한 UI를 쉽게 처리할 수 있습니다. 상태 변화에 따른 자동 렌더링은 기존 방식보다 훨씬 효율적입니다.

5.3 유지 보수성 향상

상태와 UI가 밀접하게 연결되어 있기 때문에, 코드의 유지 보수성이 높아집니다. 상태만 적절히 관리하면 UI는 자동으로 업데이트되므로, 코드 수정이 필요한 경우에도 쉽게 반영할 수 있습니다.

---

결론

React에서 상태 관리는 매우 중요한 개념으로, UI와 로직의 동기화를 간편하게 처리할 수 있습니다. useState와 useEffect와 같은 훅을 사용해 컴포넌트의 상태를 관리하고, 상태 변화에 따른 UI 갱신을 자동으로 처리할 수 있습니다. 이러한 상태 관리 방식을 통해 더 효율적이고 유지 보수성이 높은 코드를 작성할 수 있으며, React의 강력한 동적 UI 렌더링 기능을 활용할 수 있습니다.