# 02. Componet 구성해보기
### 들어가며
Componet 란 view 를 구성하는 작은 조각들을 의미합니다. \
아래의 Layout 은 크게 Header, Menu, Body 의 커다란 Component 로 구성됩니다.
### 초기 프로젝트 구성
CRA 가 만들어주는 기본 구조에서 약간의 변경이 필요합니다. \
당장 불필요한 요소들을 제거합니다.
> 앞으로의 모든 예제는 아래와 같은 상태로 시작됩니다.
```javascript
// App.css 모든 내용을 제거해주세요
```
```javascript
// App.js
import React from 'react';
import './App.css';
function App() {
return (
Hello
);
}
export default App;
```
```javascript
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(, 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 파일들을 만들어줍니다.
```javascript
// components/header.js
import React from 'react';
function Header() {
return (
Header
);
}
export default Header;
```
```javascript
// components/body.js
import React from 'react';
function Body() {
return (
Body
);
}
export default Body;
```
```javascript
// components/footer.js
import React from 'react';
function Footer() {
return (
Footer
);
}
export default Footer;
```
위의 컴포넌트들의 내용을 보면 아래와 같이 HTML 스러운 코드가 있음을 볼 수 있습니다.\
하지만 이는 HTML 이 아니라 JSX 라 불리는 React 에서 Component 를 구성하기 위해 사용되어지는 문법입니다. \
일반적인 HTML 에서는 class 라는 이름을 사용하지만 JSX 에서는 className 이라는것으로 표현되어집니다. \
이처럼 약간의 다른부분들이 존재하지만 일반적으로 사용되는 HTML 과 매우 비슷하여 거부감없이 접근하실 수 있습니다.
```javascript
Footer
```
위의 Component 들을 추가하고 App.js 에서 Component 조각들을 조립해보겠습니다.\
export 를 이용하여 Component 들을 각 파일에서 내보내고 사용할 곳에서 import 를 이용하여 Component 들을 가져올 수 있습니다.
```javascript
// 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 (
);
}
export default App;
```
```css
// 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;
}
```
아래와 같은 결과를 보실 수 있습니다. (참고로 style 은 App.js 에서 가져옵니다)
