Why React?

Web Application의 발전

html, css, javascript만을 사용하다가 jQuery와 같은 메서드 모음이 사용되었다. 하지만 웹이 점차 복잡해짐에 따라 기존 방식으로 유지 보수를 하는데 한계가 있었고, 프론트엔드 프레임워크와 라이브러리를 사용하기 시작했다.

프레임워크는 정해진 틀 안에서 개발하는 것이고, 라이브러리는 코드를 가져와서 내 작업공간에서 개발하는 것이라고 생각하자.

3대장 프론트엔드 라이브러리

• Angular
• Vue
• React

리액트

• view(화면)만 담당(사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리)
• 리액트와 같은 라이브러리나 프레임워크를 사용하면 UI를 자동으로 업데이트
• 가상돔(virtual DOM)을 통해 UI 빠르게 업데이트(가상 돔은 이전 UI 상태를 메모리에 유지해 변경될 UI의 최소 집합을 계산하는 기술!)
• 리액트는 라이브러리인 만큼 기능이 부족, third-party 라이브러리 사용(라우터, 리덕스 등)
• 페이스북의 지속적인 관리로 생태계가 활성화되어 있다.

Node.js란?

자바스크립트가 브라우저 밖에서도(서버 등) 동작하게 하는 환경이다. 프로젝트를 개발하는데 필요한 바벨, 웹팩 등이 Node.js 기반이기 때문에 필요하다. Node.js를 설치하면 npm이 자동 설치된다.

npm

• node package manager
• node 기반의 패키지를 사용하려면 npm이라는 패키지 관리 도구가 필요
• npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있음

CRA(create react app)

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구

cd Desktop/생성할폴더
npm create-react-app 프로젝트폴더명
cd 프로젝트폴더명
npm start

cra 살펴보기

• node_modules : cra를 구성하는 모든 패키지 소스 코드가 존재

• package.json : cra 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일

  "dependencies : 리액트를 사용하기 위한 모든 패키지 리스트와 버전 확인 가능
  새로운 패키지 설치시 : dependencies에 자동 추가 저장되지 않기 때문에 npm으로 설치할 때 --save까지 입력해야함. ex) npm install slider --save

• .gitignore : github에 올리고 싶지 않은 폴더와 파일을 작성
  ex) node_modules는 heavy해서 github에 올리지 않는다. package.json을 통해 패키지 이름하고 버전만 전달해주면 된다. 다른 팀원이 git clone한 뒤 npm install에서 다운받는다.

• index.html : <div id="root"></div>, single page application이기 때문에 리액트에서 html은 단 하나!
• index.js : ReactDOM.render(<App />, document.getElementById("root")), 함수의 인자는 두개(보여주고싶은 컴포넌트, 화면에 보여주고 싶은컴포넌트의 위치)
• App.js : 화면에 보여지고 있는 초기 컴포넌트