[react] Props 기초

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

props를 정의하는 공식 문서 링크

 

“props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트라고 정의한다.

저번에 만들었던 컴포넌트 코드 

https://ojm1484.tistory.com/42

[react] 컴포넌트 만들기

에 이어서 props를 적용시켜 리팩토링 해보면

 

class Content extends Component {
  render(){
    return (
      <article>
            <h2>{this.props.title}</h2>
            {this.props.desc}
      </article>
    )
  };
}
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>
       <Subject title="react" sub="for ui"></Subject>
       <TOC></TOC>
       <Content title="html" desc="html is hyperText Markup Language."></Content>
      </div> 
    )
  };
}

class App 에서 Subject 태그와 Content 태그에 title, sub, desc 속성이 추가되었다.

 

이 추가된 속성을 위에 클래스에서 props로 접근하여 꺼낼 수 있다.

Subject 클래스로 보면 

{this.props.title}  ->  이 클래스의 속성중에 title을 꺼내줘

라는 뜻이 되어서 결과적으로 title 속성에 들어있는 WEB과 react가 꺼내질 수 있는 것이다.

 

 

props의 원리와 기초에 대해서 알아보았다.