React, Props

props: 상의 컴포넌트가 하위 컴포넌트에게 내려주는 데이터이다.

props는 단순히 사용만 할 수 있고 변경은 할수 없다.

 

import React, { Component } from 'react';
import './App.css';

class Content extends Component{	//props를 사용하지 않음
  render(){
    return (
      <article>
          <h2>HTML</h2>
          HTML is HyperText Markup Language.
      </article>
    );
  }
}

class Subject extends Component {	//props 사용
  render(){
    return (
      <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
      </header>  
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>		//동적으로 바꿀수 있다
        <Subject title="HI" sub="React"></Subject>
        <Content></Content>		//정해놓은 값 그대로 나온다
      </div>
    );
  }

속성,즉 props를 받아서 그걸 바탕으로 서로 다른 결과를 만들수 있게 되었다. 

App에서 Subject 의 title 값으로 서로 원하는 값을 입력해 결과를 마음대로 바꿀수 있다.

Content와 다르게 한눈에 결과가 보이고 수정을 편리하게 할수 있는 장점이 있다.