React- component 작성법

component를 시작할 때,
import React, { Component } from 'react';

=>반드시 입력!
왜냐하면 react라는 라이브러리에서 component라는 파일을 로딩했다 라는 뜻이기에!

이후 작성

ex) import Subject from "./components/Subject";
import NavApp from "./components/NavApp";
import ArticleApp from "./components/ArticleApp";
import './App.css';

=> 즉, import(가져온다) 파일을 어디폴더에서! 
	subject라는 components를 만들겠다. 
    

그 후..

(함수명).js 를 만들어서

ex)

class App extends Component {
render(){
return (

  <div className="App">
    <Subject title = "WEB" sub="world wide web!"></Subject>
    <Subject title = "React" sub="For UI"></Subject>
    <NavApp></NavApp>
    <ArticleApp title ="HTML" desc="HTML is HyperText Markup Lanquage.
    "></ArticleApp>
  </div>
);

}
}

export default App;

: 모든 React 구성요소이름은 대문자로 시작해야한다./ 아니면 오류!
소문자로 구성요소이름을 시작하면 구성요소이름이 소문자와 같은 내장요소로 취급된다.

: react tag는 subject인데 개발자도구로 보면 웹브라우저가 알아들을 수 있는 tag header로 읽힌다. 웹브라우저는 이 세상에 react란 기술이 있는지 모르 기에..
react의 component는 한 단어로 정리정돈 이라 생각하자!!!
components 파일로 쪼개면 코드보기가 간결해진다.

: render(){
return(
);
}
까지 함수

• component를 만들 때는 반드시 하나의 최상위 태그로 시작해야함.

class____ extends Component {
render(){
return(

  <article>
    <h2>{this.props.title}</h2>
    {this.props.desc}
   </article>
);

}
}

export default ____;

=> 외부에서 사용할 수 있도록 반드시 export 사용!!