다음과 같은 Application을 만들어 보도록 하겠습니다.
여러개의 파일로 분해하여 컴포넌트를 만들어서 다음을 만들어 보도록 하겠습니다.
1. create-react-app를 이용하여 app002 프로젝트를 만듭니다.
1) 프로젝트 작성 D:\React> npx create-react-app app002 2) 폴더이동 D:\React> cd app002 3) visual code 실행 D:\React\app002> code . 4) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 WelcomeFunction.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
|
// 컴포넌트 만들기
// 함수로 만들기
function WelcomeFunction() {
return <h2>👍 함수 컴포넌트(Function Component) 입니다.</h2>;
}
export default WelcomeFunction;
|
cs |
4. src폴더에 WelcomeClass.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
// 컴포넌트 만들기
// ES6의 클래스로 만들기
import React from 'react';
class WelcomeClass extends React.Component {
render() {
return <h2>👍 클래스 컴포넌트(Class Component) 입니다.</h2>;
}
}
export default WelcomeClass;
|
cs |
5. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import WelcomeClass from "./WelcomeClass ";
import WelcomeFunction from "./WelcomeFunction";
function App(){
return (
<>
<WelcomeClass/>
<WelcomeFunction/>
</>
);
}
export default App;
|
cs |
6. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
import map from './Korea.svg' // 내용 추가
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<img src={map} style={{height:'60vmin'}}/> {/* 다음 이미지 태그 추가 */}
<App/>
</React.StrictMode>
);
|
cs |
7. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
위와 같이 UI를 구성하는 하나하나를 컴포넌트로 만들어서 부품을 조립하듯이 하나의 완성된 애플리케이션을 만들어 나가는 것입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 18] 컴포넌트(Component)에 객체를 속성으로 전달하기 (0) | 2024.10.21 |
|---|---|
| [React Exam 17] 컴포넌트(Component)에 값을 속성으로 전달하기 (0) | 2024.10.21 |
| [React Exam 15] create-react-app로 Hello World출력하기 (1) | 2024.10.16 |
| [React Exam 14] 수동으로 React Application 작성하기 (0) | 2024.10.16 |
| [React Exam 13] create-react-app를 이용한 Application 작성하기 (0) | 2024.10.15 |
