Pass props From Component To Component

Pass props From Component To Component

 

당신은 컴포넌트에 prop을 전달하는 방법을 배웠다. 

 

<Greeting firstName="Esmerelda" />

 

당신은 prop에 전달된 것에 접근하고 화면에 보이는 법을 배웠다. 

 

render() {
  return <h1>{this.props.firstName}</h1>;
}

 

 

props의 대부분의 일반적인 사용은 다른 컴포넌트로부터 가져온 정보를 컴포넌트에 전달하는 것이다. 

당신은 아직 못해봤을 수 있지만, 이것은 당신이 이미 보았던것과 매우 비슷하다. 

 

이번과제에서, 우리는 한 컴포넌트에서 다른 컴포넌트에 prop을 전달해보자.

 

문법에 대한 모호한 설명:

 

당신은 prop과 props단어의 약간 루즈한 사용을 알아차렸을지 모른다. 

불행하게도 이것은 꽤 불가피하다. 

 

props는 전달된 정보를 저장하는 객체의 이름이다.

this.props 는 저장객체를 가리킨다. 

동시에, 전달된 정보의 각 조각은 prop으로 불린다.

이것은 props가 전달된 정보의 두 조각을 가리킬 수 있다는 것을 의미한다. 

또는 이것은 이러한 정보의 조각들을 저장하는 객체를 가리킬 수도 있다. :(

 

//Greeting.js

import React from 'react';


export class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.name}!</h1>;
  }
}

 

 

//App.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Greeting} from './Greeting.js';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="bonbon" />
        <article>
          Latest newzz:  where is my phone?
        </article>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);