state
state 는 컴포넌트 상태를 나타내며, props 와 반대로 변할 수 있다.
컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다.
state 로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들 ( 리스트에서 선택된 값, 체크박스에서 체크된 값 등등)
- 가변 데이터
- 직접 변경 가능
- state가 변경되면 컴포넌트를 다시 재렌더링
- 외부에는 비공개, 컴포넌트 스스로가 관리
props
먼저 props 로 state 와의 간단한 차이는 변할 수 없다는 것.
컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가능
리액트에서 부모 > 자식 일방향성 상속이라는 특징 때문이다.
props 는 컴포넌트가 가지고 있는 다양한 값을 나타내기 위한 존재로
'this.props.xxx' 로 나타낸다
- 불변의 데이터
- 부모 요소에서 설정하는 것
- 초기값과 자료형의 유효성 검사가 가능
props 와 state 차이점
- State 는 내부 (컴포넌트) 에서 생성하고 활동하고, 데이터를 변경할 수 있다.
- Props 는 외부 (부모 컴포넌트) 에서 상속 받는 데이터이며, 데이터를 변경할 수 없음.
