subject.js 파일을 만든 후 아래 코드와 같이 component를 만든다.

 

//subject
import React from 'react';

class Subject extends React.Component{
	render(){
		return(
			<div>
				<h1>{"Start React 2021"}</h1>
			</div>
		);
	}
}

export default Subject;

  - import React from 'react'; : Raect 라이브러리에서 React class를 가져온다는 의미

  - export default Subject; : Subject class를 내보낼 때 사용한다.

 

2. class component 구조

class Name extends React.Component {
	render(){
		return();
	}
}

  - Class Component에서 이름(Name)은 대문자로 시작해야 된다. 그리고 그 안에는 render라는 메소드가 있다.

 

//App
import React from 'react';
import Subject from './subject'; //subject.js에서 Subject Class를 가져온다.

function App() {
  return ( //Subject 호출 
    <div className="App">
		<Subject />
    </div>
  );
}

export default App;

  - import Subject from './subject' : subject.js에서 Subject class를 가져온다.

  - <Subject /> : Component를 호출한다.

'FrontEnd > React' 카테고리의 다른 글

[React] Props 생성  (0) 2021.09.05
[React] state , Lifecycle  (0) 2021.08.24
[React] Components, Props  (0) 2021.08.20
[React] 시계  (0) 2021.08.19
[React] 리액트(React)  (0) 2021.08.17