[React] Props vs State

Props (Properties)

1. 정의

• 함수를 통해 전달되는 인자와 같은 성격
• 부모 컴포넌트로부터 자녀 컴포넌트로 전달되는 읽기 전용 데이터
• 부모에서 자식으로 데이터를 넘겨, 외관을 커스터마이징 해줌 (ex Form은 color라는 props를 button으로 보내, button을 커스터마이징)

2. 특징

• 읽기 전용 (Read-Only)
  
  • 자식 컴포넌트는 props를 변경할 수 없음
• 재사용성
  • props를 사용하면 여러 컴포넌트를 재사용 가능
• 함수 전달
  • 부모에서 자식으로 함수를 전달하여 특정 이벤트 처리 가능
• 데이터 흐름
  • 단방향 흐름 (부모 -> 자식)

 

State

1. 정의

• 컴포넌트의 메모리와 같은 성격
• 컴포넌트 내부에서 관리하는 동적인 데이터
• 컴포넌트가 몇몇 정보를 계속 따라갈 수 있게 해주고 변화하면서 상호작용을 만들어냄 

2. 특징

• 동적 데이터
  • 사용자 입력, 네트워크 응답, 타이머 등 동적으로 변하는 데이터를 저장
• 변경 가능
  • state는 setState() 함수나, useState() 훅을 통해 업데이트 가능

 

Props vs State 비교

구분	Props	State
소유권	부모 컴포넌트가 관리	컴포넌트 자체가 관리
변경 여부	읽기 전용 (Read-Only)	변경 가능 (Mutable)
업데이트 방식	부모 컴포넌트에서만 변경 가능	setState나 useState로 변경
용도	부모 -> 자식 데이터 전달	컴포넌트 내부 데이터 관리
리랜더링	props 변경 시 랜더링	state 변경 시 랜더링
초기값 설정	부모 컴포넌트에서 설정	컴포넌트 내부에서 설정

 

 

예시

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

  return (
    <div>
      <h1>Parent Count: {count}</h1>
      <ChildComponent count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <h2>Child Count: {count}</h2>
      <button onClick={onIncrement}>Increment from Child</button>
    </div>
  );
}

// 부모 컴포넌트에서 count라는 state 생성
// 부모 컴포넌트 -> 자식 컴포넌트 count 변수를 props로 전달
// 부모 컴포넌트에서 setCount의 값이 변경되면, 자식 컴포넌트에서도 변경됨