Pass `props` to a Component

Pass `props` to a Component

 

당신은 리엑트 컴포넌트에 정보를 전달할 수 있다. 

 

어떻게? 컴포넌트에 attribute(특성)을 줌으로써.

 

<MyComponent foo="bar" />

 

컴포넌트에 "This is some top secret info."라는 메시지를 전달하고 싶다고 가정해 봅시다.

이 작업을 수행할 수 있는 방법은 다음과 같다.

 

<Example message="This is some top secret info." />

 

당신이 볼 수 있는 것 처럼, 정보를 컴포넌트에 전달하기 위해, 

당신은 당신이 전달하기 원하는 정보를 위해 이름이 필요하다. 

 

위 예시에서, 우리는 message이름을 사용했다. 

당신은 당신이 원하는 어떤 이름이든 사용할 수 있다. 

 

만약 당신이 string이 아닌 정보를 전달하기를 원한다면,

{}안에 정보를 감쌀 수 있다. 

어떻게 배열을 전달하는지 보자. 

 

<Greeting myInfo={["top", "secret", "lol"]} />

 

다음 예시에서, 우리는 <Greeting />에 몇가지 정보조각들을 전달한다. 

string이 아닌 value들은 {}으로 감싸여져 있다. 

 

<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />

import React from 'react';
import ReactDOM from 'react-dom';

class PropsDisplayer extends React.Component {
  render() {
  	const stringProps = JSON.stringify(this.props);

    return (
      <div>
        <h1>CHECK OUT MY PROPS OBJECT</h1>
        <h2>{stringProps}</h2>
      </div>
    );
  }
}

// ReactDOM.render goes here:
ReactDOM.render(<PropsDisplayer myProp="Hello" />, document.getElementById('app'));

 

 

 

https://www.codecademy.com/courses/react-101/lessons/this-props/exercises/pass-props-component

| Codecademy