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 |