02. Componet 구성해보기
Component 를 이용하여 페이지를 구성합니다
Last updated
Was this helpful?
Component 를 이용하여 페이지를 구성합니다
Last updated
Was this helpful?
Was this helpful?
// App.css 모든 내용을 제거해주세요// App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
Hello
</div>
);
}
export default App;
// 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();// 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;<div className="wrap_footer">
Footer
</div>// 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;// App.css
.wrap_header {
width: 100%;
height: 50px;
border-bottom: 1px solid #000;
}
.wrap_body {
width: 120px;
height: 100vh;
float: left;
border-right: 1px solid #000;
}