TIL11 props

Props

• Properties의 줄임말.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 이때 프로퍼티 값은 수정할 수 없다는 특징이 있다.
• 속성 형태로 전달되는 값이다.

class Parent extends React.Component {
 render() {
 return (
 <div>
   <Child name="이름"/>
 </div>
}
export default Parent;

위의 코드에서 name이라는 프로퍼티로 전달 받은 "이름"이라는 문자열값을 아래 Child컴포넌트의 render()함수에서 참조할 수 있다.
this.props.name으로 프로퍼티 값을 참조하고 있다.

class Child extends React.Component {
 render() {
 return (
 <div>
 const name = this.props.name
 return {name};
 </div>

}

export default Child;

props는 상위 컴포넌트에서 하위 컴포넌트로만 전달된다는 것을 기억해야 한다.
Parent 컴포넌트가 Child 컴포넌트를 포함하고 있고 프로퍼티는 Parent에서 Child방향으로 전달이 되는 것이다. 이를 '단방향 데이터가 흐른다'라고 표현한다.