컴포넌트

* 컴포넌트는 최상위 태그를 하나 이상 포함해야한다.!

 

import React,{ Component  } from 'react';  // 리액트에서 컴포넌트 사용

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

export default App;

 

 

 

props

 

class Subject extends Component{
    render(){
      return (
        <header>
          <h1>{this.props.title}</h1>   //밑에 App 에서 정의한 title 값
          {this.props.sub}   // 위와 마찬가지로 sub 값
        </header>  
      );
    }
  }
  
  class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="React" sub="For UI"></Subject>
      </div>
    );
  }
}

 

 

파일 분리하기

componenets 아래 Subject.js 생성

 

import React, { Component } from 'react';

class Subject extends Component {
    render() {
      return (
        <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
        </header>
      );
    }
  }
export default Subject; //서브젝트 내보내기

 

App.js 에서는 import 시키면 분리 완료

 

import Subject from "./components/Subject";