[Main] React State 에 대하여

해당 게시글은 Chat-GPT3.5를 사용하여 작성한 내용입니다.

 

이번 블로그 글에서는 React 애플리케이션에서 상태(State)를 관리하고 업데이트하는 방법에 대해 다뤄보겠습니다.

React의 상태 관리는 애플리케이션의 동적인 변화를 다루는 핵심 부분입니다.

함께 상태 관리와 업데이트 전략을 살펴보겠습니다.

 

1. State 소개

 

React 컴포넌트 내부에서 사용하는 State는 컴포넌트의 상태를 나타내는 데이터입니다.

State는 주로 컴포넌트의 동적인 데이터를 저장하고 관리하는 데 사용됩니다.

예를 들어, 사용자 입력값이나 컴포넌트의 가시성 상태 등이 여기에 해당합니다.

 

2. State의 초기화와 사용

 

컴포넌트 내에서 State를 사용하려면 `useState` 훅을 사용합니다.

아래는 State를 초기화하고 사용하는 예시 코드입니다:

 

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

 

위 예시에서는 `useState` 훅을 이용하여 `count`라는 State와 그 값을 업데이트하는 `setCount` 함수를 생성하고 있습니다.

 

3. State 업데이트의 불변성 유지

 

React에서 State를 업데이트할 때는 불변성 유지가 중요합니다.

이는 기존 State를 직접 수정하지 않고 새로운 상태 객체를 생성하여 업데이트하는 것을 의미합니다.

이로써 React는 변경된 부분만 업데이트하고 성능을 최적화할 수 있습니다.

function ShoppingCart() {
  const [items, setItems] = useState([]);

  const addItem = (newItem) => {
    setItems([...items, newItem]); // 새 배열 생성
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem('새 상품')}>Add Item</button>
    </div>
  );
}

(**map 함수를 사용해서 반복된 내용을 생성하는 경우 key를 설정해줘야하는데. 이 예시에서는 편의상 index를 사용했지만 별도의 id를 부여하는 것을 추천합니다.

관련내용 :

2023.08.04 - [코딩 공부노트/React] - [Main] React map함수 사용시 key입력 이유! (+주의사항) )

 

4. 복잡한 State 관리와 Context API

 

컴포넌트 트리가 복잡해지거나 여러 컴포넌트 간에 State를 공유해야 할 때, Context API를 사용하여 중앙 집중식 상태 관리를 구현할 수 있습니다. 이를 통해 상태를 최상위 컴포넌트에서 관리하고 필요한 컴포넌트로 전달할 수 있습니다.

 

5. 외부 데이터와의 상태 통합

 

외부 데이터(API 호출, 브라우저 저장소 등)와 상호작용할 때도 State를 활용하여 데이터를 효과적으로 관리할 수 있습니다. 외부 데이터를 가져와 State에 반영하고, 컴포넌트가 그 데이터를 화면에 표시하도록 설계할 수 있습니다.

 

마무리

 

React에서 상태(State)는 동적인 데이터를 다루는 핵심 메커니즘입니다. `useState` 훅을 사용하여 컴포넌트 내부에서 State를 관리하며, 불변성 유지를 통해 효율적인 업데이트를 구현할 수 있습니다. 더 복잡한 상태 관리가 필요한 경우 Context API나 상태 관리 라이브러리를 활용하여 전체 애플리케이션의 상태를 효과적으로 관리할 수 있습니다.

 

이상으로 React 상태 관리에 대한 간략한 소개였습니다.

추가 정보는 [React 공식 문서](https://reactjs.org/docs/state-and-lifecycle.html)를 참고하시면 도움이 될 것입니다.