React 시작하기
리액트에서는 사용자 정의 태그를 생성할 수 있는데, 이를 '컴포넌트' 라고 한다.
컴포넌트를 사용하면 다음과 같은 장점이 있다.
- 가독성 증가
- 재사용성 증가
- 유지보수 편리
개발 환경
npm을 이용한 creat react app 설치
https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
create react app을 설치해보자.
npm i -g create-react-app
create-react-app --version🤔 npx vs npm
- npx: 임시로 설치해서 딱 한번만 실행한 후, 지운다.
- 공간을 차지하지 않는다.
- 실행할 때마다 새로 설치해서 항상 최신 상태를 유지할 수 있다.
- npm: 프로그램을 설치하는 프로그램이다.
개발 환경 구축
바탕화면에 'react-app' 디렉토리를 생성하고, 이를 리액트 개발 환경으로 설정하려고 한다.
해당 디렉토리로 이동 후, 다음 명령어를 입력한다.
create-react-app .실행이 완료되면 해당 디렉토리에 파일들이 생성된다.
웹앱 실행하기
다음 명령어를 통해 리액트가 제공하는 샘플 웹앱을 실행할 수 있다.
npm run start👉 실행 결과
자바스크립트 코딩하기
index.html
리액트를 통해 만든 컴포넌트는 root 안에 들어가야 한다.
<body>
...
<div id="root"></div>
...
</body>src/index.js
개발 작업을 하게 되면 대부분의 파일은 src 디렉토리에 넣게 될 것이다.
이 중에서 진입 파일은 index.js이다. 다음 코드를 기반으로 해서 index.html에서 root를 찾는다.
<App />이 바로 리액트로 만든 컴포넌트이다.
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);src/App.js
클래스 방식을 사용해서 진행할 것이므로 App.js에 함수로 작성된 코드를 다음과 같이 클래스로 수정한다.
import logo from './logo.svg';
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
앞으로 개발 작업을 할 때, 다음처럼 <div className="App">에서 작업을 하게 될 것이다.
import logo from './logo.svg';
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hello, React!!
</div>
);
}
}
export default App;👉 실행 결과
CSS 코딩하기
src/index.css
body {
background-color: powderblue;
}👉 실행 결과
배포하기
배포 명령을 입력하면 'build' 디렉토리가 생성된다.
👉 배포 시에는 웹서버의 document/root 경로에 'build' 디렉토리 안쪽에 있는 파일들을 위치시키면 된다.
npm run buildserve -s build
npm을 통해 설치할 수 있는 간단한 웹서버이다.
npm install -g serve
npx serve -s buildnpx serve -s build를 명령어를 입력해보았다. 다음처럼 웹에 접속할 수 있는 주소를 알려준다.
👉 실행 결과
