TIL #9 React Props

• Props

Props는 Component 들끼리의 소통을 위한 도구이다.

Props는 상위 Component에서 하위 Component로 데이터를 전달하기 위한 도구이고, 하위 Component에서 상위 Component에 값을 전달할 수는 없다.

Props의 값은 상위 Component에서 import한 하위 Component의 안에 입력해준다.

nameCard라는 하위 Component가 있다.

export class NameCard extends Component {
  render() {
    return (
      <div className="NameCard">
        <span>name:</span>
        <span>{this.props.name}</span>
        <br />
        <span>Position:</span>
        <span>{this.props.position}</span>
      </div>
    );
  }
}

• 위 Component에서 name과 position에 해당하는 span 태그의 내용을 this.props.name과 this.props.position 으로 정의해줬다.

상위 Component 에서 nameCard Component 를 사용

<NameCard
     name={"joonsik"}
     position={"ceo"}
/>
<NameCard 
     name={"yeri"}
     position={"front mentor"} 
/>
<NameCard
     name={"sangrok"} 
     position={"back mentor"} 
/>

• 위와 같이 상위 Component에서 하위 Component를 불러와서 JSX 코드 안에 props 값 데이터를 입력해주면 상위 Component에서 입력한 데이터를 하위 Component 로 전달해줄 수 있다.
• Props의 값을 State 값으로 지정해줄 수도 있다.

위에 있는 예시 코드의 상위 Component에 name과 position을 State로 지정해준 후

<NameCard
	name={this.state.name}
    	position={this.state.position}
/>

와 같은 형태로 정의해줄 수 있다.