React는 복잡한 사용자 인터페이스를 쉽게 구축하기 위해 페이스북에서 만든 JavaScript 라이브러리입니다.
React는 각각의 독립적인 컴포넌트 단위들을 서로 조립해서 페이지를 만듭니다.
- JavaScript 라이브러리
재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다.- React를 쓰는 이유
UI 재사용이 좋으며, 코드 가독성이 높다.
유지보수가 편해진다 (문제가 있는 컴포넌트를 빠르게 찾아낼 수 있음)
React Native (모바일 어플리케이션 언어) 확장성.- 비슷한 라이브러리와 프레임워크
VueJS, AngularJS
한 가지의 기능을 수행하는 UI 단위.
컴포넌트 DOM tree 처럼 하나의 Vitrual Dom Tree라는 Tree 형식으로 만들어져 있습니다.
- Virtual DOM Tree
React가 가지고 있는 가상 DOM tree (진짜 돔 트리를 복사한 것)
JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 줍니다.
쪼개진 컴포넌트를 사용자에 화면에 구현할 때 사용하는 rander 함수를 다시 호출하는 과정.
업데이트 이전의 Virtual DOM Tree 상태와, 업데이트 이후의 Virtual DOM Tree 상태를 비교, 업데이트 된 내용이 있다면 그때 Real DOM TREE를 업데이트 합니다.
npm, npx, yarn
세가지 모두 Node 프로젝트에서 설치되는 패키지나 라이브러리들을 관리해주는 툴.
React는 여러가지 오픈 소스 라이브러리(도구)들을 빌려와 개발.
npm install 패키지명
npx create-react-app 프로젝트명
npm install -g yarn
yarn add 패키지명
// 프로젝트를 생성할 폴더에서
// Mac은 터미널,
// Windows는 Cmder 혹은 vscode 터미널 실행
// 프로젝트 생성
> npx create-react-app 프로젝트명
// 실행 (기본포트 3000)
> cd 프로젝트명
> npm start
가장 많이 사용되는 모듈 번들러.
어플리케이션을 구성하는 자원(HTML,CSS,PNG 등을) 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구.
- 모듈
프로그래밍 관점에서 특정 기능을 갖고 있는 작은 코드 단위.
기능을 하는 코드 집합.