React기초-3.props

 

오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 <Subject> 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다.

 

App.js

import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';

class App extends Component {
	render(){
      return (
        <div className="App">
          {/* 기존코드
          <Subject />
          */}
          <Subject title="WEB" sub="world wide web!" />

          <TOC />

          <Content title="HTML" desc="HTML is HyperText Markup Language." />
        </div>
      );
    }
}

export default App;

 

Subject.js

import React, { Component } from 'react';

class Subject extends Component {
    render() {
        return (
            <div>
                <header>
                    {/* 기존 코드
                    <h1>WEB</h1>
                    world wide web
                    */}
                    <h1>{this.props.title}</h1>
                    {this.props.sub}
                </header>
            </div>
        );
    }
}

export default Subject;

위의 예에서 보듯이 기존에는 Subject.js에서 직접 태크와 텍스트로 그려내던 것을

App.js 내에서 Subject 컴포넌트의 title, sub와 같은 속성(props)으로 정의한 다음,

다시 Subject.js에서 이 속성(props)를 위의 코드와 같은 형식으로 불러서 출력할 수 있습니다.

 

이후 과제 진행을 위해서 Content.js도 props 속성을 이용하여 수정하도록 하겠습니다.

 

Content.js

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div>
                <article>
                    <h2>{this.props.title}</h2>
                    {this.props.desc}
                </article>
            </div>
        );
    }
}

export default Content;