TIL 10 | React 기본 개념 및 설치 방법

React는 무엇일까? 🧐

✅ 간략한 정의 : 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리

그럼 React를 사용하게 된 이유는?

Web이 초기에는 정적인 웹으로 사용되다가 시간이 지나면서 점점 HTML, CSS, JavaScript가 복잡해지고 양이 방대해지면서 동적인 웹으로 변화되어왔다.

• 1 세대 Web : HTML, CSS
• 2 세대 Web : JavaScript, jQuery (DOM을 통해서 직접 지정을 해줘야 했고, Web에 많은 기능들이 추가되면서 점점 유지보수와 가독성이 어려워짐)
• 3 세대 Web : React, Angular, View 같은 프론트엔드 프레임워크 & 라이브러리 출시

프론트엔드 프레임워크 및 라이브러리를 사용하는 이유는 아래와 같다.

• UI를 자동으로 업데이트 해줌
• 가상 DOM을 통해 UI를 빠르게 업데이트 해줌
  [가상 DOM : 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술]
• 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아짐
  
  

Angular,View는 Model-View-Controller Architecture이고React는 UI적인(View) 부분에서만 컨트롤할 수 있는데 왜 React를 더 많이 사용할까?


Third-party앱이 다양해서 내 입맛에 맞게 사용할 수 있고, 무엇보다 React 생태계가 활성화되어 있어 전 세계적으로 사용자가 많다. (Facebook에서 만든 거라 더더욱 그런 것 같다.)

React를 사용하기 위한 준비물

Node.js 설치

Node.js는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 구축하기 위해 깔아줘야 한다.
(Project 개발 환경을 구축하는 주요 도구[CRA, Babel, Webpack 등]들이 Node.js 기반으로 되어 있다.)

• Node.js를 설치하면 npm이 저절로 같이 설치된다.
  (비유를 하자면 npm은 앱스토어, 구글플레이와 같이 필요한 앱들을 설치할 수 있는 프로그램이다.)
  
  

CRA (Create-React-App) 설치

CRA는 리액트 프로젝트를 시작하기 앞서 필수 개발 환경을 자동으로 셋팅해주는 도구다.

• React는 UI 기능만 제공하기 때문에 개발자가 스스로 본인에게 필요한 개발 환경을 직접 셋팅해야하는데 초기에 일일히 설정하기에 어려움이 있다. 이 문제를 해결해주기 위해 필요한 개발 환경을 CRA를 통해 패키지로 다운받을 수 있는 것이다.
• 설치 방법 (터미널) : React를 사용할 폴더로 경로 이동을 한 상태에서 아래 코드를 터미널에 입력한다.

npx create-react-app folderName //입력하면 다운로드가 시작된다
cd folderName 	//my-app 프로젝트 진입
npm start	//로컬 서버 작동되서 브라우저로 창이 뜬다

React 설치 후 폴더 설명

설치를 완료하고 나면 설치한 디렉토리에 아래 폴더 및 파일들이 생길 것이다.

• node_modules : 사용할 수 있는 라이브러리 패키지가 들어있는 폴더
  (CRA를 구성하는 모든 패키지 소스 코드가 존재)
  
  
• .gitignore : 이 파일에 있는 목록은 깃허브에 push해서 올릴 때 올리지 않을 폴더와 파일 리스트
  
  
• package.json : 만들고 있는 어플리케이션에 대한 정보가 기록된 파일
  (CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록됨)
  npm install (터미널 입력) : 현재 만들고 있는 어플리케이션(package.json)을 다운받을 수 있음

작업 flow

1. 개발자A가 초기 세팅, React, React Router, Sass 등 설치하고 깃허브에 push (node_modules, package.json)
   ⚙️ node_modules는 용량이 크고 모두 사용되는 것이 아니기 때문에 .gitignore 파일에 넣어서 관리 (어차피 필요한 라이브러리/패키지는 package.json에 있음)
2. 개발자B는 개발자A가 깃허브에 올린 작업물을 git clone을 통해 로컬 저장소에 다운로드하여 npm install을 통해 package.json에 있는 라이브러리/패키지를 설치