React : #1 React 시작하기

1. create-react-app

• 하나의 명령을 실행해서 React Web App을 빠르게 셋업해주는 기능
• webpack, babel 등 다양한 라이브러리를 직접 다운로드하고 패키지를 세팅하지 않고도 자동으로 초기 세팅을 만들어 줌
• 사용방법
  • 터미널에서 리액트 패키지를 생성하려는 폴더로 이동함
  • npx 명령어로 프로젝트 패키지 생성 : npx create-react-app folderName
• package.json, .gitignore, README.md 등 파일이 생김
• npm commands :
  • npm start : 리액트 프로젝트 개발 server 동작 및 시작
  • npm build : 설치한 번들을 정적 파일로 빌드
  • npm test : test runner 시작
  • npm eject : create-react-app 에 hide된 모든 요소를 풀어줌, 한번 eject하면 이전으로 돌아갈 수 없음

*npm과 npx의 차이

— npm : Node Package Module

• 프로젝트마다 모듈을 설치하는 방식이 아닌 내 컴퓨터 안에 전역적으로 모듈을 설치하기 위해서는 -g(global) 옵션을 사용한다
• 그러나 이 방식은 다음과 같은 단점이 있다
  • 재설치하지 않는 이상, 모듈이 업데이트 되었는지 확인이 불가능하다
  • 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있다. (프로젝트마다 다른 모듈 버전이 필요한 경우 문제가 발생할 수 있음)
  • 변경사항이 잦은 create-react-app과 같은 보일러플레이트의 경우는 항상 최신버전을 유지하는 것이 좋은데, npm -g로 설치하는 경우 이전 버전을 사용하게 되는 경우가 많다

— npx :

레지스트리에서 호스팅되는 CLI도구 및 기타 실행파일을 쉽게 사용할 수 있고,

최신 버전에 해당하는 패키지를 설치하여 실행하고 이후에 설치된 패키지는 제거

2. Git 연동하기 (Github)

• git init : react-create 프로젝트에 terminal을 열고 git init (git repository 초기화 및 저장소 생성)
• github 등 저장소에 가서 새로운 저장소 생성 및 url 주소 복사 (ssh는 인증서 방식으로 url과 다름)
• 터미널에 git remote add origin 깃허브주소 입력하고 엔터
  • git remote : 깃의 원격 저장소를 다루는 명령어로, origin 은 원격저장소를 가르키는 가장 일반적인 별칭
  • git remote add [별칭] [원격저장소주소] : 별칭이라는 이름으로 원격저장소를 등록한다
    • git remote add origin https://www.github.com/깃주소
• add, commit, push origin master 명령어를 통해 깃허브 저장소와 프로젝트를 연결
• .gitignore 에 제외할 내용 입력하기

 

3. React 작동원리

• CRA로 프로젝트를 생성하면 자동적으로 webpack, babel 등이 세팅된다.
• Package 구성
  • node_modules : node 기반의 모듈 번들러 (webpack)
  • public : static resources (favicon, index.html....)
  • src: 기본적으로 사용되는 js파일 (App.js, index.js)과 직접 작성되는 js 파일을 보관
  • package.json : 설치된 node 모듈의 버전이나 이름 등 프로젝트의 의존성을 관리하는 파일
  • package-lock.json : 의존성 트리를 관리하는 json파일, 종속성업데이트와 관계없이 동일한 트리를 생성하여 개발자들이 같은 의존성을 설치할 수 있도록 돕는 json파일
• index.js :
  • index.js 에는 기본 <App/> 엘리먼트가 들어가있다. React는 Virtual DOM을 생성하여 필요시마다 랜더링하는 방식으로 실행된다.
  • index.html 파일을 보면 root라는 id를 가진 div태그가 있는데, index.js의 <App/> 컴포넌트를 통해서 root 하위에 컴포넌트들을 만들고 페이지를 구성할 수 있다.
  • React는 엘리먼트를 직접 하나의 html 파일에 작성하지 않아도 javascript 문법으로 모든 요소(컴포넌트)를 작성하고 rendering 하여 html 코드로 넣는다.
  • 가상 DOM을 랜더링하는 방식이기 때문에 페이지 소스코드가 직접적으로 나타나지 않아 빠른 로딩이 가능하다. (페이지 로드시 비었거나 가벼운 HTML 파일을 로드하고 react가 컴포넌트를 밀어넣는 방식이기 때문)