// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
실습
Component 조각들 (Header, Body, Footer) 을 추가하기 위해 Component 들을 모아둘 폴더를 생성합니다. src 폴더 아래 components 라는 폴더를 추가하고 Component 파일들을 만들어줍니다.
// components/header.js
import React from 'react';
function Header() {
return (
<div className="wrap_header">
Header
</div>
);
}
export default Header;
// components/body.js
import React from 'react';
function Body() {
return (
<div className="wrap_body">
Body
</div>
);
}
export default Body;
// components/footer.js
import React from 'react';
function Footer() {
return (
<div className="wrap_footer">
Footer
</div>
);
}
export default Footer;
위의 컴포넌트들의 내용을 보면 아래와 같이 HTML 스러운 코드가 있음을 볼 수 있습니다.
하지만 이는 HTML 이 아니라 JSX 라 불리는 React 에서 Component 를 구성하기 위해 사용되어지는 문법입니다.
일반적인 HTML 에서는 class 라는 이름을 사용하지만 JSX 에서는 className 이라는것으로 표현되어집니다.
이처럼 약간의 다른부분들이 존재하지만 일반적으로 사용되는 HTML 과 매우 비슷하여 거부감없이 접근하실 수 있습니다.
<div className="wrap_footer">
Footer
</div>
위의 Component 들을 추가하고 App.js 에서 Component 조각들을 조립해보겠습니다.
export 를 이용하여 Component 들을 각 파일에서 내보내고 사용할 곳에서 import 를 이용하여 Component 들을 가져올 수 있습니다.
// App.js
import React from 'react';
import './App.css';
import Header from './components/header'
import Body from './components/body'
import Footer from './components/footer'
function App() {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
}
export default App;