React Props와 State

🔍 Props와 State의 차이점

React에서 컴포넌트 간 데이터 흐름을 이해하려면 props와 state의 차이를 명확히 이해해야 합니다.

🧩 Props란?

• 부모 → 자식 컴포넌트로 데이터를 전달할 때 사용
• 읽기 전용으로 자식 컴포넌트에서 변경할 수 없음
• 컴포넌트를 재사용 가능하게 만들어줌

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

<Welcome name="React" />
  

⚙️ State란?

• 컴포넌트 내부에서 동적인 데이터를 관리
• 사용자 이벤트나 비동기 결과에 따라 변경 가능
• state가 변경되면 컴포넌트가 자동으로 리렌더링

import { useState } from 'react';

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

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

📊 Props vs State 비교

항목	Props	State
데이터 소유자	부모 컴포넌트	자기 자신(컴포넌트 내부)
변경 가능 여부	변경 불가	변경 가능
용도	외부 데이터 전달	내부 상태 관리
리렌더링	값이 바뀌면 리렌더링	state 변경 시 리렌더링

💡 요약

• props는 컴포넌트에 데이터를 전달하는 수단
• state는 컴포넌트 내부에서 변경되는 데이터를 관리
• 둘 다 렌더링에 영향을 주며, React의 핵심 데이터 흐름을 구성