개요.
1. Index.html에서 최종화면 출력
2. APP.js (Component)를 통해 원하는 동작 수행
1. 기본구조
Index.html
...
<body>
<div id="root"></div>
</body>
...- Main 화면을 출력해주는 위치
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<App />,
document.getElementById('root')
);- ReactDOM.render()
+ React Component (예, App.js)를 출력하기 위해서 사용하는 함수
- document.getElementById('root')
+ 어떤 DOM에 그릴지 지정하는 함수
APP.js
import react, { Component } from 'react'
import './App.css'
class App extends Component {
render(){
const name = 'react'
const style = {
backgroundColor: 'black',
padding: '16px',
color:'white',
fontSize:'12px'
}
return(
<div className = "App">
hello {name}
</div>
);
}
}
export default App;
- 클래스로 Component를 생성 [ Class App extends Component{} ]
- Component 생성
+ render (){} 함수 필수
+ JSX로 return
- export default App
+ 작성한 Component를 다른 곳에서 불러올 수 있게 지정하는 명령어
위 프로젝트를 실행한 예
반응형
