React - State

State

---

state는 컴포넌트 내부에서 관리되는 데이터

각 컴포넌트는 자체적으로 상태를 가질 수 있으며, 이 상태는 컴포넌트가 렌더링될 때 사용되며, 변경되면 컴포넌트가 리렌더링된다.

state는 컴포넌트가 동적인 데이터를 관리하고, 이 데이터에 기반하여 화면을 업데이트할 수 있도록 도와준다.
=> 예를 들어, 버튼 클릭, 입력 필드 입력, 서버로부터의 데이터 요청 등의 사용자 상호작용에 따라 데이터를 업데이트하고 화면을 변경할 때 사용된다.
함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있다. 

예시

import React, { useState } from 'react';

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

  // 상태 업데이트 예시
  const handleClick = () => {
    setCount(count + 1);
  }

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

export default MyComponent;

함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 선언하고, 해당 상태를 업데이트할 때는 반환된 setter 함수를 사용한다.

State의 특징

컴포넌트 내부에서 관리된다.

state는 각 컴포넌트의 내부에서 관리되며, 해당 컴포넌트에 의해 소유된다.

변경 가능하다.

state는 직접적으로 변경할 수 있다.
setState() 메서드를 사용하여 state를 변경하고, 변경된 state는 리액트가 관리하는 가상 DOM에 적용된다.

비동기적 업데이트

setState() 호출은 비동기적으로 처리된다.
따라서 setState()가 호출되더라도 즉시 state가 변경되지는 않는다.

반응형 업데이트

state가 변경될 때마다 리액트는 해당 컴포넌트를 리렌더링한다.
이러한 반응형 업데이트를 통해 사용자 인터페이스가 동적으로 변경될 수 있다.

컴포넌트의 라이프사이클에 영향을 준다.

state의 변경은 컴포넌트의 라이프사이클에 영향을 줄 수 있다.
state가 변경될 때마다 render() 메서드가 다시 호출되어 UI가 업데이트된다.

리액트에서 State를 관리하는 방법(useState)

---

useState란, React 함수형 컴포넌트에서 상태를 추가하고 관리하기 위한 Hook

useState 훅은 배열 형태의 반환값을 가지며, 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트할 수 있는 함수이다.

useState의 장점

간편한 상태 관리

useState를 사용하면 함수형 컴포넌트에서도 간편하게 상태를 관리할 수 있다.
별도의 클래스 컴포넌트를 생성할 필요 없이 상태를 선언하고 업데이트할 수 있다.

여러 개의 상태 사용 가능

한 컴포넌트에서 여러 개의 상태를 관리할 수 있다.
useState를 여러 번 호출하여 각각의 상태를 정의할 수 있다.

불변성 유지

useState를 사용하여 상태를 업데이트할 때에는 이전 상태를 직접 변경하지 않고, 새로운 상태를 반환한다.
React가 상태의 변경을 감지하고 자동으로 컴포넌트를 리렌더링하도록 한다.

상태 업데이트 비동기 처리

useState를 통해 상태를 업데이트할 때 React는 상태 업데이트를 비동기적으로 처리한다.
따라서 여러 번의 상태 업데이트 호출이 동시에 일어나더라도 React는 최적화하여 한 번에 상태를 업데이트한다.

함수형 컴포넌트에서도 상태 관리 가능

함수형 컴포넌트에서도 useState를 사용하여 상태를 관리할 수 있다. 이를 통해 함수형 컴포넌트가 상태를 가질 수 있게 되었고, 클래스 컴포넌트와 비슷한 기능을 수행할 수 있게 되었다.

예시

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 count 상태와 해당 상태를 업데이트할 함수를 선언합니다.
  const [count, setCount] = useState(0);

  // 버튼을 클릭할 때마다 count 값을 증가시키는 함수를 선언합니다.
  const incrementCount = () => {
    setCount(count + 1); // setCount를 호출하여 count 상태를 변경합니다.
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      {/* 버튼을 클릭하면 incrementCount 함수가 실행됩니다. */}
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;