[React] State와 Props : 개념 및 상관관계

 

1. State란 무엇인가?

state는 컴포넌트 내부에서 관리되는 동적 데이터입니다. 사용자가 애플리케이션과 상호작용할 때 데이터가 변경될 수 있으며, 이 변화는 React에 의해 자동으로 UI에 반영됩니다.

React의 useState 훅을 사용하여 상태를 정의하고 업데이트합니다.

 

특징

• 내부 데이터: state는 컴포넌트 내부에서 선언되고 관리되며, 다른 컴포넌트가 직접 접근할 수 없습니다.

• 변경 가능: state는 React의 상태 관리 메서드를 통해 변경할 수 있습니다.

• UI 업데이트 트리거: 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 리렌더링됩니다.

 

코드 예제: Counter 컴포넌트

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // state 초기화

  const increment = () => setCount(count + 1); // state 업데이트
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Counter: {count}</h1> {/* state 값 표시 */}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

 

위 예제에서 count는 상태이며, setCount를 통해 값을 업데이트하면 React가 UI를 자동으로 갱신합니다.

 

2. Props란 무엇인가?

props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다.

props는 컴포넌트 간의 데이터 전달에 사용되며, 읽기 전용입니다. 자식 컴포넌트는 전달받은 props를 수정할 수 없습니다.

 

특징

• 외부 데이터: 부모 컴포넌트에서 전달된 데이터로, 자식 컴포넌트에서만 읽을 수 있습니다.

• 불변성: props는 변경할 수 없으며, 데이터를 수정하려면 부모에서 새로운 값을 전달해야 합니다.

• 컴포넌트 간의 통신: 상위-하위 관계의 컴포넌트 간 데이터 공유에 사용됩니다.

 

코드 예제: Greeting 컴포넌트

function Greeting({ name }) { // props를 구조 분해 할당
  return <h1>Hello, {name}!</h1>; // props 값 표시
}

export default Greeting;

 

부모 컴포넌트에서 props 전달

import React from "react";
import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting name="Alice" /> {/* props로 name 전달 */}
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

 

 

3. State와 Props의 차이점

특징	State	Props
관리 주체	컴포넌트 내부에서 관리	부모 컴포넌트에서 자식으로 전달
변경 가능 여부	React의 메서드를 통해 변경 가능	읽기 전용
사용 목적	컴포넌트의 동적 데이터 관리	컴포넌트 간 데이터 전달
수정 주체	컴포넌트 자체에서 수정 가능	부모 컴포넌트만 수정 가능

 

 

4. State와 Props의 상관관계

React 애플리케이션에서는 state와 props가 서로 긴밀히 연결되어 작동합니다. 부모 컴포넌트의 state는 자식 컴포넌트의 props로 전달될 수 있습니다. 이 구조를 통해 컴포넌트 간 데이터를 공유하고, 상위 컴포넌트에서 상태를 제어하면서 자식 컴포넌트의 UI를 동적으로 업데이트할 수 있습니다.

 

코드 예제: 부모의 State를 자식의 Props로 전달

import React, { useState } from "react";

function Display({ count }) { // 부모의 state를 props로 받음
  return <h1>Count: {count}</h1>;
}

function Counter() {
  const [count, setCount] = useState(0); // 부모의 state
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <Display count={count} /> {/* state를 props로 전달 */}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

 

동작

1. Counter 컴포넌트에서 count 상태를 관리합니다.

2. count 상태를 Display 컴포넌트의 props로 전달합니다.

3. 상태가 변경될 때마다 Display 컴포넌트도 자동으로 업데이트됩니다.

 

5. 결론

• State는 컴포넌트 내부에서 데이터를 관리하는 데 사용되며, 동적인 UI 업데이트를 가능하게 합니다.

• Props는 컴포넌트 간 데이터를 전달하는 데 사용되며, 데이터는 읽기 전용으로 자식 컴포넌트에서 수정할 수 없습니다.

• 두 개념은 상호 보완적이며, 부모-자식 관계의 컴포넌트에서 유기적으로 결합되어 React 애플리케이션의 데이터 흐름을 형성합니다.