React STEP 14 - Props의 사용 - 4

⭐ Props

• 컴포넌트 속성 전달하기
• Component1 -> Component2 -> Component3 내용 전달 

1. 단계 1

class Component3 extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.color}</p>
        <p>{this.props.name}</p>
        <p>{this.props.size}</p>
      </div>
    )
  }
}

class Component2 extends React.Component {
  render() {
    return (
      <Component3 color={this.props.color} name={this.props.name} size={this.props.size}></Component3>
    )
  }
}

class Component1 extends React.Component {
  render() {
    return (
      <Component2 color={this.props.color} name={this.props.name} size={this.props.size}></Component2>
    )
  }
}

root.render(
  <Component1 color="#f90" name="orange" size="small"></Component1>
)

 

2. 단계 2

• 전개 연산자(spread operator, ...) 을 사용하면 이러한 전달 코드를 조금 더 간단하게 작성할 수 있습니다.

const obj1={shape: "triangle", x: 42};
const obj2={shape: "rectangle", y: 12};
const cloneObj={...obj1};
// console.log(cloneObj); // {shape: "triangle", x: 42}
const mergeObj={...obj1, ...obj2};
// console.log(mergeObj); // {shape: "rectangle", x: 42, y: 12}

• 예시

class Component6 extends React.Component {
  render() {
    return (
      <div>
        <p style={{ color: this.props.color }}>{this.props.color}</p>
        <p>{this.props.name}</p>
        <p>{this.props.size}</p>
      </div>
    )
  }
}

class Component5 extends React.Component {
  render() {
    return (
      <Component6 {...this.props}></Component6>
    )
  }
}

class Component4 extends React.Component {
  render(){
      return(
          <Component5 {...this.props} />
      );  
  }
}

root.render(
  <Component4 color="#f90" size="small" name="orange"></Component4>
)