2026-01-10

Props와 State

Props란?

부모 컴포넌트가 자식 컴포넌트에게 전달하는 읽기 전용 데이터

function Child({ name }) {
  return <div>{name}</div>;
}

<Child name="React" />;

• 부모 → 자식 단방향 데이터 흐름
• 읽기 전용 → 자식 컴포넌트에서 직접 수정 불가
• 컴포넌트를 재사용 가능하게 만듦

언제 사용?

• 컴포넌트에 외부 데이터 전달
• UI를 동적으로 표현할 때
• 공통 컴포넌트에 값 주입할 때

State란?

컴포넌트 내부에서 관리되는 변경 가능한 데이터

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

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

• 컴포넌트 자신이 관리
• 값이 변경되면 리렌더링 발생
• 사용자 인터랙션, UI 상태 관리에 사용

언제 사용?

• 클릭, 입력값, 토글 상태
• 모달 열림/닫힘
• 서버에서 받아온 데이터

Props와 State 차이

참고자료

• React의 state와 props
• [React/기술면접] State와 Props
• React의 핵심 개념 Props와 State의 차이점 이해하기