Props

1. 개념

'속성'을 뜻하는 'property'의 줄임말.

속성은 나보다 상위의 존재인 부모 컴포넌트로부터 부여받는 것으로, 오로지 읽기 전용이다.

부여받을 수 있는 내용에는 제한이 없어 객체 이외에도 함수 또한 가능하다.

2. 전달

//부모 컴포넌트에서
<ChildComponent
    id={this.state.userId}
    toggleBtn={this.toggleBtn}
/>

• 객체 형태.
• 부모로부터 전달받은 데이터는 자식 컴포넌트 내장 객체 this.props 안에 담겨있다.

3. 호출

this.props.(전달받을 때 선언된 이름)

ex) this.props.id
//부모 컴포넌트에서의 key 값은 'userId'였으나, 전달 시 'id'로 전달받았기 때문.

(+) 구조분해할당 적용 시

//render() 내에서
const { id } = this.props;

4. State 끌어올리기

Props는 오로지 읽기 전용으로 자식이 부모 안에서 선언된 상태를 변경하는 것은 불가능하다. 그렇다면 어떻게 가능하게 하는가?의 해답이 바로 'State 끌어올리기'이다.

부모 컴포넌트는 상태와 함께 상태를 변경하는 함수를 모두 미리 만들어 자식에게 내려보내주어야 한다.

이렇게 하면 자식 컴포넌트 내에서 전달받은 함수를 이용해 부모의 state 값을 변경 가능하다.