props와 state
#resource
#react
작성일:2025. 4. 20.
수정일:2025. 4. 21.
1745187761-propsAndState.png
props 와 state 둘다 데이터를 관리하기 위한 값이다.
State(상태)#
State는컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 렌더링에 영향을 주는 동적인 값이다.
주요 특징#
- 컴포넌트 내부에서 생성되고 관리된다.
- 변경 가능(mutable)아며, 상태가 변경되면 컴포넌트가 다시 렌더링된다.
- 컴포넌트의 생명주기 동안 유지된다.
- 비동기적으로 업데이트될 수 있다.
Important
setState()나setState의 업데이트 함수는 상태를 즉시 변경하지 않고 업데이트를 예약한다.(비동기적)- 이전 상태에 의존하는 업데이트트는 함수형 업데이트를 사용해야 한다.
JavaScriptjs
Props(속성)#
Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 이다.
주요 특징#
- 외부(부모 컴포넌트)에서 전달받는다.
- 읽기 전용(read-only)이며 컴포넌트 내부에서 변경할 수 없다.
- 부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 props도 업데이트될 수 있다.
- 컴포넌트 간의 데이터 흐름을 형성한다.
Important
- Props는 단방향 데이터 흐름을 구현한다(부모->자식)
- Props는 불변성(immutability)을 가진다.
- 기본값 설정이 가능하다.
- Props를 통해 함수도 전달할 수 있어 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 수 있다.
| 특성 | State | Props |
|---|---|---|
| 출처 | 컴포넌트 내부 | 부모 컴포넌트 |
| 변경 가능성 | 변경 가능(mutable) | 읽기 전용(immutable) |
| 업데이트 방법 | setState() 또는 useState 훅의 업데이트 함수 | 부모 컴포넌트에서만 변경 가능 |
| 데이터 흐름 | 컴포넌트 내부 흐름 | 하향식(top-down)흐름 |
| 사용 용도 | 컴포넌트의 내부 상태 관리 | 컴포넌트 간 데이터 전달 |