리액트 설치 및 구성(1) 기본
리액트 최소조건 기본실행 모듈
기본적으로 실행하기 위한 최소한 포함되어야 하는 모듈을 소개한다.
react 모듈
-
- react
- 리액트의 핵심 모듈로, UI 컴포넌트를 생성하고 관리하는 역할을 수행한다. 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화하고, 컴포넌트의 상태(State)와 속성(Props)을 관리하며, 이벤트 처리, 라이프사이클 메서드 등을 제공한다.
react-dom 모듈
-
- react-dom
- 리액트에서 실제 DOM(Document Object Model)과 상호작용하기 위한 모듈로, 웹 브라우저에서 리액트 애플리케이션을 렌더링하는 역할을 수행한다. DOM 요소를 조작하고, 컴포넌트를 실제 DOM에 렌더링하며, 이벤트 핸들러를 등록하고 관리하는 등의 기능을 제공한다.
react와 react-dom은 함께 사용되어, 리액트 애플리케이션을 개발하고 브라우저에서 실행시키는데 필수적인 모듈이다.
react-scripts 모듈
-
- react-scripts
- React 애플리케이션을 개발, 빌드 및 실행하기 위한 설정 및 스크립트를 제공하는 패키지 이다. Create React App이라는 React 프로젝트를 쉽게 생성하고 개발 환경을 구성하는 도구에서 사용되는 패키지 이다. 특징은 다음과 같다.
// package.json { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, }기본 설치된 Create React App 에서 기본적으로 등록되어있고 제공하는 scripts 기능을 살펴본다.
- react-scripts start
- (기본적이므로 생략)
-
react-scripts build
#STEP0. React 애플리케이션을 로컬에서 개발하고 테스트했다면, 애플리케이션을 실제 웹 서버에 배포해야 하는 상황. npx react-scripts build # STEP1. /build 폴더 생성 되어짐 # STEP2. 빌드된 애플리케이션 파일들이 해당 폴더에 저장 되어짐. # STEP3. 이제 이 폴더를 웹 서버에 업로드. (FTP, AWS, GCP 등등.)create-react-app으로 만든 프로젝트에서 사용할 수 있다.
- 프로덕션 빌드를 위해 애플리케이션 코드를 번들링 한다.
- 코드를 최적화하고, 불필요한 코드를 제거 한다.
- public 폴더에 있는 정적 파일을 빌드된 애플리케이션 폴더로 복사 한다.
- build 폴더에 최종 빌드된 애플리케이션을 생성 한다.
- 이렇게 생성된 빌드된 애플리케이션은 [웹 서버에 배포]하여 사용할 수 있다.
-
react-scripts test
npx react-scripts test #실행 PASS src/App.test.js ✓ renders learn react link (122 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 5.83 s Ran all test suites. Watch Usage › Press f to run only failed tests. › Press o to only run tests related to changed files. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.react-scripts test 명령어는 Create React App에서 제공하는 테스트 러너인 Jest를 실행하는 명령어이다.
- 이 명령어는 src 폴더 내부에 있는 파일들 중에서 .test.js나 .spec.js 확장자를 가진 파일들을 찾아서 자동으로 실행한다.
- 해당 파일에 대한 테스트를 실행하고, 결과를 콘솔에 출력한다.
- Jest는 일반적으로 [유닛 테스트]와 [통합 테스트]를 지원한다.
- [유닛 테스트]는 코드의 일부분, 즉 함수나 모듈 등의 작은 단위를 테스트.
- [통합 테스트]는 전체 시스템이나 애플리케이션의 구성요소들 간의 상호작용을 테스트.
- Jest는 이 두 가지 유형의 테스트를 모두 지원하며, 또한 describe와 it 함수를 사용하여 테스트 케이스를 작성할 수 있다.
- react-scripts test 명령어는 기본적으로 Jest의 Watch 모드로 실행된다.
- 이 모드에서는 테스트 파일이 변경될 때마다 자동으로 테스트를 다시 실행한다.
- Watch 모드를 끄려면 react-scripts test –no-watch 명령어를 사용한다.
- 그리고 –coverage 옵션을 사용하면 테스트 커버리지 정보를 출력할 수 있다.
- react-scripts eject
# 아직 안해봄react-scripts eject 명령어는 Create React App으로 만든 프로젝트에서 webpack, Babel 등의 설정 파일을 외부로 분리하여 직접 수정할 수 있게 해주는 명령어.
- eject 명령어를 실행하면, Create React App이 생성한 모든 설정 파일이 현재 프로젝트 폴더의 최상위 디렉토리에 복사 된다.
- 이후 package.json 파일의 scripts 항목에서 react-scripts 대신 webpack-dev-server 등을 직접 사용할 수 있다.
단, eject 명령어는 되돌릴 수 없으므로, 사용하기 전에는 반드시 백업을 해두는 것이 좋습니다. 또한, 설정 파일을 직접 수정하면서 발생하는 오류는 모두 사용자 책임이므로, 신중하게 사용해야 한다.
리액트앱 구조
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--중략-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--중략-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--중략-->
</body>
</html>
이 파일은 웹의 메인 페이지 이다.
react를 하면서 여러 컴포넌트들을 만들어 나간다.
이때 create-react는 여기 마지막 줄 근처에 div id =”root” 안에 들어가도록 약속되어 있다.
src/index.js
import App from './App'; // 컴포넌트 호출
// (중략)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
이 파일은 엔트리포인트인 main() 이다.
document.getElementById('root') 이 부분은 index.html에서의 #root 부분에 해당 한다. 현재
src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
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;
이 파일은 리액트 기본구성에 들어있던 App 이라는 컴포넌트이다. 즉, 리턴되는 내용을 불러와서 메인 화면을 구성한 것이다.
src/index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* 추가 CTH */
button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin-left: 10px;
cursor: pointer;
font-size: 16px;
}
.button-gray {background-color: #A9A9A9;}
button:hover {background-color: #3e8e41;}
.button-gray:hover {background-color: #F09438;}
추가하고 서버를 재기동하면 버튼에 대한 스타일이 잘 적용된다.
지금 디폴트로 css파일이 위치한 경로는 src 경로에 있는데 일반적으로 src/styles 디렉토리 안에 index.css 파일을 위치시키고, 해당 파일에서 전역적으로 사용되는 스타일을 정의한다고 한다.
리액트에서 엔트리포인트를 찾는 방법
리액트에서 엔트리포인트를 찾는 방법은 webpack.config.js 파일에서 entry 항목을 확인하는 것이다. 이 항목은 웹팩이 번들링을 시작할 진입점(entry point)을 지정하는 곳으로, 일반적으로 src/index.js 또는 src/App.js와 같은 파일이 지정된다.
그런데 아무리 뒤져봐도 이 파일이 없다..
찾아보니 엔트리포인트를 내부적으로 설정한다고 한다.
- create-react-app 명령어로 생성한 React 프로젝트에서는 기본적으로 webpack.config.js 파일이 생성되지 않는다.
- 대신에 기본적인 설정은 숨겨져 있는 상태로 create-react-app이 내부적으로 Webpack을 사용한다
- 만약 Webpack 설정을 커스터마이징하고 싶다면, eject 명령어를 사용하여 create-react-app에서 기본으로 제공하는 설정 파일들을 밖으로 꺼내고, 직접 수정해야 한다.
- eject 명령어를 사용하여 create-react-app의 내부 설정을 수정하는 것은 비추천
- 프로젝트 구성이 복잡해지고 업데이트가 어려워질 수 있기 때문
- react-app-rewired 와 같은 도구를 사용하여 기본 설정을 커스터마이징을 추천한다. 이 방법은 create-react-app 이 제공하는 내부 설정을 직접 수정하지 않고, 커스터마이징된 설정을 사용하여 React 애플리케이션을 빌드할 수 있도록 도와준다.
정리하면, create-react-app으로 프로젝트를 생성했다면, src/index.js 파일이 엔트리포인트이다. 이 파일에서 ReactDOM.render() 메서드를 호출하여 리액트 컴포넌트를 렌더링한다. 따라서 src/index.js 파일에서 ReactDOM.render() 메서드를 찾아보면 엔트리포인트를 확인(엔트리 포인트라고 생각해라..)할 수 있다.
// src/index.js (설치시 디폴트 내용)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
리액트 기본설치(일반적인)
다음과 같이 리액트를 사용하기 위해 별도 학습용 폴더를 생성했다.
mkdir reactStudy
기본 설치한구조는 다음과 같다.
tree
.
├── package.json
├── package-lock.json
├── bck # 리액트 앱 CREATE 한 프로젝트
│ ├── README.md
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html # react 의 기본구조 /public/웰컴파일 필수
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js # react 의 기본구조 /src/리액트트실행파일 필수
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
└── node_modules
STEP1. npm 프로젝트 초기화
# package.json 1개의 파일이 생성되어짐.
npm init -y
tree
.
└── package.json
STEP2. React 설치
# React 설치
# npm install -g create-react-app # 전역 설치
npm install create-react-app # 일반 설치
tree
.
├── node_modules
├── package-lock.json
└── package.json
// package.json
{
"dependencies": {
"create-react-app": "^5.0.1", //추가
}
}
STEP3. React 앱 생성
# create-react-app bck # 전역 설치 시 앱생성(npx 생략가능)
npx create-react-app bck # 일반 설치 시 앱생성
tree
.
├── package.json
├── package-lock.json
├── bck # 리액트 앱 CREATE 한 프로젝트
│ ├── README.md
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html # react 의 기본구조 /public/웰컴파일 필수
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js # react 의 기본구조 /src/리액트트실행파일 필수
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
└── node_modules
npx create-react-app 프로젝트이름
위 명령어를 사용하면 Create React App이라는 공식 리액트 프로젝트 템플릿을 이용하여 새로운 리액트 프로젝트를 생성할 수 있다. 이 명령어를 실행하면, 리액트 프로젝트를 위한 초기 파일과 폴더 구조가 생성되며, 필요한 리액트 라이브러리 및 개발 도구가 자동으로 설치된다.
npx의 경우 항상 최신버전의 react를 설치하지만, 임시로 설치하는 것이기 때문에 매번 새롭게 다운로드를 받아야 한다. 그에 반해 npm은 한번 설치를 하게 되면 추가적으로 다운로드 할 필요가 없지만 버전업이 됐을 시, 최신 버전을 사용하지는 못한다.
STEP4. React 앱 실행
# 일반적인 리액트 개발서버 실행(react-scripts 모듈의 기능)
npx react-scripts start
# 실행 스크립트 생성으로 개발서버 실행
npm start
정리
기본 구성을 정리하면 다음과 같다.
- React 앱의 기본 구성은 src 디렉토리 안에 있는 index.js 파일에서 이루어진다. 이 파일에서는 React 앱의 루트 컴포넌트를 정의하고, ReactDOM.render() 함수를 사용하여 컴포넌트를 DOM에 렌더링 한다.
- React에서는 컴포넌트 단위로 앱을 구성한다. 새로운 컴포넌트를 생성하려면 src 디렉토리 안에 새로운 .js 파일을 생성하여 컴포넌트를 정의하면 된다.
- 기본적으로 생성된 React 앱에는 이미 예제 컴포넌트들이 포함되어 있으므로 이를 참고하여 컴포넌트를 생성하면 된다.
무엇보다 create-react-app 기능으로 매우 간단하게 구축했다.
Leave a comment