> For the complete documentation index, see [llms.txt](https://simplereact.gitbook.io/simplereact/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplereact.gitbook.io/simplereact/02.-componet.md).
# 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 에서 가져옵니다)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://simplereact.gitbook.io/simplereact/02.-componet.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.