[ReactJS] React란? (Virtual DOM, npm과 npx, 구조, React Router DOM, Data Flow)

 

Recat JS

• facebook 에서 2013 년에 발표한 library
• 컴포넌트로 이루어져 있어 재사용성이 뛰어남
• Virtual DOM

 

Real DOM? Virtual Dom? 이 무엇인가.

10개의 리스트가 있을 때, 그 중 하나의 리스트가 Update 되었다.

• Real DOM : 전체 리스트를 다시 Reload 해야하므로, 많은 비용 발생
• Virtual DOM : 바뀐 한 가지 아이템만 DOM에서 바꿔 줌.

 

Virtual Dom은 어떻게 한 가지 아이템만 DOM에서 바꿀 수 있을까?

1. JSX 를 랜더링한다. (Virtual DOM 이 Update)
2. 이전 Virtual DOM과 비교해 바뀐 부분을 찾는다. ( = diffing)
3. 바뀐 부분만 Real DOM에서 바꿔준다.

 

---

npx 활용하여 React App 생성

webpack이나 babel에 대한 수동적 설정 없이, create-react-app Command로 바로 리액트 시작하기

• Webpack : 웹 제작에 라이브러리, 프레임워크 등을 사용하게 되면서 문서 구조가 복잡해짐. 많은 모듈들을 묶어서 간단하게 보내주는 역할.
• Babel : 최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜줌. (ES5 자바스크립트 문법으로 변환)
• server 폴더와 client폴더 구분 후, client 에서 진행

npx create-react-app .

npm ( node package manager)

: 라이브러리를 담는 레지스트리 역할을 한다.
: node.js에서 사용하는 모듈을 패키지로 만들어 npm을 통해 관리하고 배포하고 있음.

npx

: npm 을 좀 더 편하게 사용하기 위해 npm에서 제공해주는 하나의 도구로 이해
: npx는 npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고, 관리할 수 있도록 도와주는 CLI 도구

• 장점1. Disk space 낭비하지 않을 수 있다.
• 장점2. 항상 최신 버전을 사용할 수 있다.

 

---

Bolier Plate에 특성화된 구조

• _actions / _reducer : Redux를 위한 폴더
• components/views : Page를 위한 폴더
• components/views/Sections : Page와 관련한 css 파일, componenet를 위한 폴더
• App.js : Routing 관련 일을 처리
• Config.js : 환경 변수 정하는 곳
• hoc : Higher Order Component의 약자
  • component를 갖는 function
  • 예를 들어 Auth라는 HOC가 있을 때(여러가지 컴포넌트 가짐), 회원 자격이 되는지 확인한 후, 페이지에 보내주거나 아니라면 다른 페이지로 보내주는 역할을 할 수 있다.
• utils : 여러군데에서 쓰일 수 있는 것은 이곳에 넣어, 어디서든 쓸 수 있게끔 해줌

tip :( ES7 React/Redux/GraphQL/React-Native snippets) VScode 확장 다운받으면, 'rfce' 통해 react 함수형 컴포넌트 바로 불러올 수 있다. ('rcc'는 클래스 컴포넌트)

 

React Router DOM

• 페이지 이동할 때, React Router DOM 활용 (https://reactrouter.com/web/example/basic)
• App.js 에서 라우팅을 만든다. react-router-dom

npm install react-router-dom --save (client 에서)

 

DOM 작성법 1.

<Route exact path="/">
    <LandingPage/>
</Route>

DOM 작성법 2.

<Route exact path="/" component = {LandingPage}/>

 

---

Data Flow

• server(nodeJS) <- client(ReactJS) : request
• server(nodeJS) -> DataBase : request에 대한 데이터 확인
• server(nodeJS) -> client(ReactJS) : response

ReactJS에서 보내는 Request

AXIOS 사용 (JQeury 사용할 때 AJAX)

npm install axios --save