리액트 프레임워크에서 상태 관리는 주로 컴포넌트의 상태(State)와 속성(Props)을 활용하여 이루어집니다. 리액트는 컴포넌트 기반 아키텍처를 가지고 있으며, 이러한 컴포넌트들은 각자의 상태를 갖고 있고, 이들 상태가 변할 때마다 뷰를 자동으로 업데이트합니다.

상태(State)는 컴포넌트 내부에서 관리되며 변경 가능한 값을 저장하는 데 사용됩니다. 상태는 useState 훅을 사용하여 함수형 컴포넌트에서 관리할 수 있습니다. 이 훅은 상태를 선언하고, 해당 상태를 업데이트하고, 변경된 상태 값을 반환하는 기능을 제공합니다. 예를 들어, 다음과 같이 상태를 관리할 수 있습니다:

import React, { useState } from 'react';

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

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

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

export default MyComponent;

위 예제에서 useState 훅을 사용하여 count라는 상태 변수를 선언하고, setCount 함수를 통해 해당 상태를 업데이트합니다. onClick 이벤트 핸들러를 통해 incrementCount 함수를 호출하여 count 값을 증가시킬 수 있습니다.

속성(Props)은 컴포넌트에 전달되는 변경 불가능한 값들을 의미합니다. 부모 컴포넌트에서 자식 컴포넌트에게 속성을 전달하여 데이터를 공유하고 컴포넌트 간의 통신을 할 수 있습니다. 속성은 컴포넌트의 함수 매개변수로 전달되며, 속성 값은 컴포넌트 내부에서 참조할 수 있습니다. 예를 들어, 다음과 같이 속성을 사용하여 데이터를 전달할 수 있습니다:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default MyComponent;

위 예제에서 props 매개변수를 통해 속성을 전달받고, {props.name}을 통해 속성 값에 접근합니다.

이처럼 리액트 프레임워크에서는 컴포넌트의 상태와 속성을 통해 상태 관리를 수행하며, 이를 이용하여 동적인 뷰를 구현할 수 있습니다.

참고 자료:

• 리액트 공식 문서 (한국어)
• 리액트 상태 관리: useState 훅 사용법