[React] 생활코딩-1 리액트 입문

1. 리액트 왜 쓸까?

리액트가 없다면?

• 작성한 태그가 많아지면 코드가 한눈에 들어오지 않음

사용자 정의 태그 Component로 작성

• 가독성
• 재사용성 높아짐
• 유지보수를 쉽게 할 수 있음

2. 개발환경 종류

https://reactjs.org/

1) Online Playgrounds

컴퓨터에 세팅할 수 없는 환경이라면 CodeSandbox 이용

2) Add React to a Website

부분적으로 React 기능을 추가하고 싶을 때 서비스 추가
(🚨 초급사용자가 사용하기에 까다로울 수 있음)

3) Create a New React App

Toolchain: 여러가지 개발환경, 도구를 모아놓은 것
create-react-app

3. 개발환경 준비

1) node.js 설치

• Node.js 공식 홈페이지
• npm -v : 설치 확인

2) Create React App 설치

- npm을 이용한 방법

• npm install -g create-react-app
• create-react-app -V : 설치 확인. 설치한 프로그램의 버전이 나오면 성공

- npx을 이용한 방법 (공식적으로 권장하는 방법)

• npx create-react-app

👉 npm과 npx의 차이:
npm은 설치하는 프로그램, npx는 임시로 설치해서 실행 후 지워지는 프로그램

4. 개발환경 구축

리액트 개발환경을 만들기 위해 react-app 폴더 만들기

• cd 경로
• create-react-app . : 현재 디렉토리가 create react app에 의해 개발환경이 됨

5. 샘플 웹앱 실행

Visual Studio Code 에디터 이용

• 터미널 띄우기 : View - Terminal
• npm (run) start : 실행
• ctrl + c : 실행 종료

6. 디렉터리 구조 파악

1) JS

• public - index.html
  react 실행 시 나오는 첫 화면.
  컴포넌트가 <div id="root"></div> 태그 안에 들어감
• src - index.js
  document.getElementById('root') : id 를 이용해 index.html 에 진입.
  <App /> : 리액트를 통해 만든 사용자 정의 태그 (컴포넌트)
  import App from './App' : App 컴포넌트를 구현한 걸 불러옴 (App.js)
• src - App.js
  App 컴포넌트로 실제 구현한 파일

2) CSS

• import './App.css' css 파일 불러오기

7. 배포

• 터미널에 npm run build 명령 실행 시 디렉터리에 build 파일 생성
• 공백과 같은 불필요한 내용 없어짐 = 용량이 줄어듦