props

컴포넌트를 만들어서 복사하면 똑같은 결과를 얻을 수 있다.

 

Class Subject extends Component {

    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>

.....

 

this 뒤에 있는 props는 리액트에서 속성값을 나타내는 키워드. props 뒤 title에는 원하는 값을 사용한다.

 

이 코드가 더 효율적인 이유는 Subject 컴포넌트는 원래 언제나 똑같은 값을 보여주는 컴포넌트였는데, 다음과 같이 title과 sub를 바궈서 작성하면 이 title의 값과 sub의 값이 Subject라는 컴포넌트의 입력 값이 되어서 그에 따라 달라지는 출력 값을 화면에 표시한다.