[React] state 에 대한 설명.

JavaScript에서의 "state" 개념은 특히 React와 같은 프레임워크에서 매우 중요합니다. 상태는 컴포넌트의 데이터를 관리하고, 이 데이터가 변할 때 컴포넌트를 다시 렌더링하여 사용자 인터페이스를 업데이트합니다. 이를 통해 사용자와의 상호작용이 자연스럽고 동적인 웹 애플리케이션을 만들 수 있습니다.

React에서의 State

1. 컴포넌트와 State

React 애플리케이션은 여러 개의 컴포넌트로 구성됩니다. 각 컴포넌트는 독립적인 UI 조각으로, 자신만의 상태(state)를 가질 수 있습니다. 상태는 컴포넌트 내부에서 선언되며, 그 컴포넌트의 데이터를 보유하고 관리합니다.

2. 상태의 선언

상태는 두 가지 주요 방법으로 선언됩니다:

클래스 컴포넌트
함수형 컴포넌트 (React 훅 사용)

클래스 컴포넌트:

클래스 컴포넌트에서는 this.state 객체를 사용하여 상태를 선언합니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

위 예제에서 count는 상태로 선언된 값입니다. increment 메서드는 상태를 업데이트합니다.

함수형 컴포넌트:
함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 선언합니다.

import React, { useState } from 'react';

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

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

여기서 useState는 배열을 반환합니다. 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.

3. 상태의 업데이트

상태는 직접 변경할 수 없습니다. 대신 setState (클래스 컴포넌트) 또는 상태 업데이트 함수 (함수형 컴포넌트)를 사용하여 변경합니다. 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링합니다.

4. 비동기적 업데이트

상태 업데이트는 비동기적으로 처리됩니다. 예를 들어, 여러 번 setState를 호출해도 React는 이를 배치(batch) 처리하여 성능을 최적화합니다.

5. 단방향 데이터 흐름

React에서 데이터는 부모에서 자식으로 흐릅니다. 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트는 props를 통해 받은 데이터를 렌더링합니다. 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 필요가 있을 때는, 부모 컴포넌트에서 상태 업데이트 함수를 자식 컴포넌트에 props로 전달하고, 자식 컴포넌트는 이를 호출합니다.

예제: Todo List 애플리케이션

아래는 상태를 이용한 간단한 Todo List 애플리케이션의 예제입니다.

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

위 코드에서는 todos라는 상태 배열과 newTodo라는 상태 문자열을 사용합니다. 사용자가 입력 필드에 텍스트를 입력하면 newTodo 상태가 업데이트됩니다. "Add Todo" 버튼을 클릭하면 addTodo 함수가 호출되어 todos 배열에 새로운 항목이 추가되고, 입력 필드가 비워집니다.

상태(state)는 React와 같은 프레임워크에서 매우 중요한 개념으로, 컴포넌트가 시간에 따라 변경될 수 있는 데이터를 관리하고 사용자 인터페이스를 동적으로 업데이트하는 데 사용됩니다. 이를 통해 복잡한 사용자 상호작용을 관리하고, 사용자 경험을 향상시킬 수 있습니다.

개발