react 속성(props), react Developer Tools 사용

참고사이트 

https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

React - YouTube

2020/05/04 - [react/기초] - react 설치, 개발환경구축

2020/05/05 - [react/기초] - react 구조

2020/05/11 - [react/기초] - react 컴포넌트(component) 개념

- react 속성(props) 사용

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

class Subject extends Component {
  render(){
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
      </header>
    );
  }
}

..생략

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject></Subject>
        <Nav></Nav>
        <Article></Article>
      </div>
    );
  }
}

export default App;

Subject(component)가 재사용성을 획기적으로 높일려면 어떻게 해야할까?

위의 <header>의 WEB, world wide web는 고정된 값이 아닌 속성(props)으로 바꿀수 있다.

 

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

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>
        <Nav></Nav>
        <Article></Article>
      </div>
    );
  }
}

export default App;

class App에 <Subject title, sub>를 만들어주고, class Subject에서 jsx문법 {this.props.title} 처럼 사용한다.

* 자바스크립트에서는 속성을 attribute라고 하지만, 리액트에서는 props라고 칭한다.

 

- react Developer Tools 

crome 확장프로그램 설치 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

React Developer Tools

개발자 도구에서 화면에서 사용중인 component를 확인할 수 있다.

개발자도구로 component 확인