리액트 React | 상태(State)

 

✅ 상태(State)

https://studyingych.tistory.com/52

React에서 상태(State)는 컴포넌트 내에서 관리되는 비공개적인 데이터로, 컴포넌트 내부에서 값을 변경하고 화면에 반영하는 데 사용됩니다. State는 컴포넌트의 동적인 데이터를 저장하고 업데이트하는 데 주로 활용됩니다. State는 일반 JavaScript 객체이므로 여러 가지 데이터 유형을 저장할 수 있습니다.

 

💡 상태(State)와 속성(Props) 차이점

https://velog.io/@chloeee

React에서는 상태(State)와 속성(Props)이라는 두 가지 주요 개념을 사용하여 컴포넌트의 데이터를 관리합니다.

---

Props는 읽기 전용 데이터로, 컴포넌트 외부에서 설정되고 컴포넌트 내부에서는 변경할 수 없습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 반면에 State는 컴포넌트 내에서 관리되는 내부 데이터로, 컴포넌트 내부에서 읽고 변경할 수 있습니다.  State는 동적인 데이터를 처리하는 데 사용됩니다.

 

💡 배치(Batch) 업데이트

리액트는 상태(State) 값이 변경될 때마다 리렌더링을 수행합니다. 그러나 상태 값이 많이 변경되는 경우에는 매번 리렌더링이 발생하여 애플리케이션의 성능이 저하될 수 있습니다. 이를 방지하기 위해 변경된 값들을 모아 한 번에 업데이트하는 배치(Batch) 기능을 사용할 수 있습니다. 배치 업데이트는 일정한 주기(일반적으로 16ms)로 처리되며, 여러 상태 값의 변경을 한 번에 처리하여 리렌더링을 최적화합니다. 이를 통해 불필요한 리렌더링을 줄여 애플리케이션의 성능을 향상할 수 있습니다.

 

✅ 상태(State) 관리 방법

리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트에서 각각 다른 방식으로 상태를 관리합니다. 어떤 방식을 사용하더라도 상태를 직접 수정하는 것이 아니라 해당 메서드를 사용하여 상태를 업데이트해야만 리액트가 상태 변경을 감지하고 리렌더링을 수행합니다. 이를 통해 사용자에게 항상 최신 정보를 보여주고 UI를 업데이트할 수 있습니다.

 

💡 함수형 컴포넌트- useState Hook

함수형 컴포넌트에서는 useState Hook을 사용하여 상태를 관리합니다. useState는 초기 상태값과 해당 상태를 업데이트하는 함수를 반환합니다. 이를 이용하여 상태를 읽고 업데이트할 수 있습니다.

---

예를 들어, 다음은 useState를 사용하여 상태를 관리하는 예시입니다. useState(0)은 초기 상태값으로 0을 설정하고, setCount 함수를 통해 count 상태를 업데이트합니다. 버튼을 클릭할 때마다 count 값이 증가하며, 컴포넌트는 새로운 상태를 가지고 리렌더링 됩니다.

import React, { useState } from 'react';

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

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

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

 

💡 클래스형 컴포넌트 - setState 메서드

클래스형 컴포넌트에서는 setState 메서드를 사용하여 상태를 관리합니다. setState는 객체 또는 함수를 인수로 받아 컴포넌트의 상태를 업데이트합니다.

---

예를 들어, 다음은 setState를 사용하여 상태를 관리하는 예시입니다. constructor를 통해 초기 상태값을 설정하고, setState 메서드를 사용하여 count 상태를 업데이트합니다. increment 메서드 내에서 이전 상태(prevState)를 사용하여 새로운 상태를 계산하고 업데이트합니다. 버튼을 클릭할 때마다 count 값이 증가하며, 컴포넌트는 새로운 상태를 가지고 리렌더링 됩니다.

import React from 'react';

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

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

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