React STEP 12 - Props의 사용 - 2

⭐ Props

 

1. props를 객체형으로 사용하기

class Props extends React.Component {
  render() {
    let {propsValue} = this.props;

    return (
      <div>
        <p>{JSON.stringify(propsValue)}</p>
        <p>{propsValue.program}</p>
        <p>{propsValue.version}</p>
      </div>
    )
  }
}

class App2 extends React.Component {
  render() {
    let h1Style = {
      fontWeight: "normal"
    }

    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props propsValue={{program: "React", version: "18.2.0"}}></Props>
      </div>
    );

  }
}

root.render(
  <App2></App2>
)

• 해석

let {propsValue}=this.props;
함수 내에서 변수를 선언해 props로 전달된 값을 할당합니다.

{JSON.stringify(propsValue)}
object 객체의 key와 value 값들을 화면에 출력합니다

 

2. props를 필수 값으로 사용하기

class Props2 extends React.Component {
  render() {
    let {program, version} = this.props;

    return (
      <div>
        {program} {version}
      </div>
    )
  }
}

class App3 extends React.Component {
  render() {
    let h1Style = {
      fontWeight : "normal"
    }

    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props2 version="18.2.0"></Props2>
      </div>
    )
  }
}

Props.propTypes= {
  program: PropTypes.isRequired
};

root.render(
  <App3></App3>
)

• 해석

program: PropTypes.isRequired
program이라는 props 값을 필수 값으로 지정합니다. 하지만 상위 컴포넌트에서 program이라는 
props를 전달하지 않았기 때문에 경고 메시지가 발생합니다.

 

3. props를 기본 값으로 사용하기

class Props3 extends React.Component {
  render() {
    let {program, version} = this.props;

    return (
      <div>
        {program} {version}
      </div>
    );
  }
}

class App3 extends React.Component {
  render() {
    let h1Style = {
      fontWeight: "normal"
    }
    
    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props3 version="18.2.0"></Props3>
      </div>
    );
  }
}

Props3.defaultProps = {
  program: "React",
  version: "1000"
}

root.render(
  <App3></App3>
)

• 해석

{program} {version}
program props 값이 비어 있기 때문에 Props.defaultProps에서 지정한 기본 값이 화면에 표시됩니다. 
version props 값은 상위 컴포넌트에서 전달되었기 때문에 지정한 기본 값은 무시됩니다.

Props.defaultProps={
상위 컴포넌트에서 값이 전달될 것이라 기대되는 program과 version props에 각각 기본 값을 
할당했습니다

 

4. props를 사용해 자식 컴포넌트에 node 전달하기

class Props4 extends React.Component {
  render() {
    let children = this.props.children;

    return (
      <div>
        {children}
      </div>
    )
  }
}

class App4 extends React.Component {
  render() {
    let h1Style={
      fontWeight: "normal"
    }
    
    return(
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props4>
          <p>Node from App Component1.</p>
        </Props4>
        <Props4>
          <p>Node from App Component2.</p>
        </Props4>
      </div>
    )
  }
}

root.render(
  <App4></App4>
)

• 해석

{children}
상위 컴포넌트에서 전달한 node는 this.props.children이라는 구문으로 접근할 수 있습니다