[React] 1. 시작하기 (리액트 소개, 설치, 수정, 배포)

 

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다.

---

1. 리액트 소개

• 메타에서 개발한 오픈 소스 자바스크립트 라이브러리
• SPA (Single Page Application)을 전제로 한다
• 웹 앱을 만드는 라이브러리 React, Angular, Vue 중 가장 사용자가 많다.
  
  
• 리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것
• 사용자 정의 태그
  • 부품으로 사용된다
  • 남들에게 공유할 수 있고, 남들의 부품을 사용할 수 있음
  • 거대한 리액트 부품 공유망으로 들어가는 것은 큰 가능성을 열어준다
• 리액트를 만드는 2가지 방법
  • 클래스(class) 문법 사용 → 이전 강의 참고
  • 함수(function) 문법 사용 : 최근에 많이 사용 → 최신 강의에서 사용

---

2. React 설치하기

 

• Create React App
  • React 배우기에 간편한 환경
  • 링크 : https://create-react-app.dev/   

• 터미널에서 npx create-react-app .  입력
  • “.”은 현재 디렉토리를 의미
  • npx 실행을 위해 node.js 설치 필요

• react 설치 후 : npm start 명령어를 입력
  • 리액트 개발환경이 실행되어 코딩할 수 있는 환경이 동작
  • 잠시 기다리면 브라우저로 React 샘플 app이 뜬다.

React 샘플 app 실행 모습

---

3. 리액트 수정하기 

• index.js
  • src 폴더에 존재하는 index.js는 입구 파일
  • 즉 npm start를 이용하여 creative-react-app을 구동시키면 index.js에 적힌 대로 동작

• App.js
  • index.js에서 <App />을 지우면 페이지가 동작하지 않음
  • <App / >은 index.js와 같은 페이지의 App.js에 정의되어 있음
  • App.js의 내용을 편집해가면서 페이지를 만든다.
  • css 내용은 App.css 파일에 존재함

index.js에는

const root = ReactDOM.createRoot(document.getElementById('root')); 라는 코드가 있는데,

여기에서 Id값이 root인 태그는 → public 폴더 안 index.html에 존재한다.

---

4. 리액트 배포하기 

 

• npm start를 이용해서 실행시킨 애플리케이션 : 개발을 위한 애플리케이션
  • 개발하기엔 좋지만 실제로 서비스 하기에는 용량이 큼
  • 불필요한 메시지도 표시하여 실제로 서비스에 사용하기 좋지 않은 결과물

• 작업 결과 빌드하기 : 터미널에 npm run build 입력
  • build (배포판을 만드는 과정) 명령이 시작
  • 작업 공간에 build 폴더가 생김
  • build 폴더에는 index.html 등의 파일이 생성됨
  • index.html 등의 파일에는 최대한 용량을 절약하기 위해 공백도 없음

• 빌드 결과 실행하기 : npx serve -s build
  • 빌드한 결과를 실행할때는 serve라는 앱 사용하는 것을 추천
  • -s 옵션 : 사용자가 어떤 경로로 들어오든지 상관 없이 index.html 파일 서비스
  • build : index.html이 들어있는 폴더명
  • 정리 하면, serve -s build : build 폴더 안에 있는 index.html 파일을 서비스 하겠다.
  • serve는 node.js로 만들어진 앱이므로, npx를 이용하여 간편하게 실행
  • http://localhost:3000/을 이용해 확인 가능