[ReactJS] 리액트 시작하기

React란?

React는 복잡한 사용자 인터페이스를 쉽게 구축하기 위해 페이스북에서 만든 JavaScript 라이브러리입니다.
React는 각각의 독립적인 컴포넌트 단위들을 서로 조립해서 페이지를 만듭니다.

• JavaScript 라이브러리
  재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다.
  
  
• React를 쓰는 이유
  UI 재사용이 좋으며, 코드 가독성이 높다.
  유지보수가 편해진다 (문제가 있는 컴포넌트를 빠르게 찾아낼 수 있음)
  React Native (모바일 어플리케이션 언어) 확장성.
  
  
• 비슷한 라이브러리와 프레임워크
  VueJS, AngularJS

컴포넌트(Component)

한 가지의 기능을 수행하는 UI 단위.
컴포넌트 DOM tree 처럼 하나의 Vitrual Dom Tree라는 Tree 형식으로 만들어져 있습니다.

• Virtual DOM Tree
  React가 가지고 있는 가상 DOM tree (진짜 돔 트리를 복사한 것)

JSX 문법

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줍니다.

re-render

쪼개진 컴포넌트를 사용자에 화면에 구현할 때 사용하는 rander 함수를 다시 호출하는 과정.
업데이트 이전의 Virtual DOM Tree 상태와, 업데이트 이후의 Virtual DOM Tree 상태를 비교, 업데이트 된 내용이 있다면 그때 Real DOM TREE를 업데이트 합니다.

React Project 만들어보기

npm, npx, yarn
세가지 모두 Node 프로젝트에서 설치되는 패키지나 라이브러리들을 관리해주는 툴.
React는 여러가지 오픈 소스 라이브러리(도구)들을 빌려와 개발.

npm

• 노드의 기본 패키지 관리 툴.
• 사용빈도가 가장 높음.
• create-react-app 실행시 라이브러리 다운 받아야하는데 엄청 무겁다.
• npm을 통해서 react project를 잘 만들진 않는다.
  npm install 패키지명

npx

• npm과 달리 패키지를 실행만 시켜주는 도구.
• 리액트 프로젝트 생성 시 제일 많이 사용 됨.
• npx를 사용하면 create-react-app을 install하지 않아도 실행시킬 수 있다.
• npm 5.2이상부터는 기본 패키지 관리툴에 포함.
  npx create-react-app 프로젝트명

yarn

• 과거 npm보다 속도,안정성 모두 뛰어나 주목을 받음.
• 현재 속도, 안정성 npm이 따라 잡은 상태.
• 보안성에 있어서 만큼은 npm과 npx와 결이 다름.
• 하지만 npm이 가장 많이 쓰이기 때문에 yarn을 지원하지 않는 라이브러리가 많음.
  npm install -g yarn
yarn add 패키지명

React Project 만들기

// 프로젝트를 생성할 폴더에서 
// Mac은 터미널, 
// Windows는 Cmder 혹은 vscode 터미널 실행

// 프로젝트 생성
> npx create-react-app 프로젝트명

// 실행 (기본포트 3000)
> cd 프로젝트명
> npm start

웹팩(Webpack)

가장 많이 사용되는 모듈 번들러.
어플리케이션을 구성하는 자원(HTML,CSS,PNG 등을) 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구.

• 모듈
  프로그래밍 관점에서 특정 기능을 갖고 있는 작은 코드 단위.
  기능을 하는 코드 집합.