[#1] React JS로 Front-end 시작하기

📒React JS란?

• Facebook에서 만든 Library. not Framework.
• Components: module과 비슷하게 컴포넌트로 이루어져 있어서 재사용성이 뛰어남.

 

📒Real DOM vs Virtual DOM

• 여러개의 리스트중 한 리스트에 변경이 생기면 Real DOM은 전체 리스트를 다시 로드해야 하지만
  Virtual DOM에서는 변경된 리스트 하나만 다시 로드하면 됨.

 

📒Virtual DOM의 과정

1. JSX(HTML같은)를 렌더링하면 Virtual DOM이 Update됨.
2. Virtual DOM이 이전 virtual DOM에서 찍어둔 Snapshot과 비교해서 바뀐 부분을 찾아냄. ("diffing"이라고 함.)
3. 그 바뀐 부분만 Real DOM에서 바꿔줌.

 

📒Create-React-App, npm run start

• vscode termianl에서 npx create-react-app . 로 react 준비 완료.
• npm run start 를 입력하면 맨처음 이런 화면을 볼 수 있음.

 

📒NPX? NPM?

• NPM(Node Package Manager): registry 라는 저장소 역할
• npm에 관한 것들은 "package.json"에 정의되어 있음.
•  

  NPM install LOCALLY	Links created at the ./node_modules/.bin directory
  NPM install GLOBALLY	Links created from the global bin/ directory ex) %AppDate%/npm on Windows      /usr/local/bin on Linux

• npx를 이용해서 레지스트리에 있는 create-react-app을 찾아서 다운로드할 필요없이 이용할 수 있음.
• 디스크 공간을 낭비하지 않을 수 있고, 항상 최신 버전을 사용할 수 있다는 장점이 있음.

 

📒전체적인 구조

• App.js에서 페이지가 렌더링됨.
  1) "public/index.html"에서 <div id=root">
  2) "src/index.js"에서 document.getElementById('root') 로 <div>태그를 가져옴.
• webpack이 src폴더를 관리해줌.
  img등을 넣으려면 src 폴더에 넣어야 webpack이 모아서 렌더링해줌.

 

• <Boiler Plate 구조>[Components/views]

  LandingPage.js	렌더링되는 첫 화면 페이지
  App.js	Routing(원하는 페이지로 이동할 수 있도록 하는 것) 관련 일.
  Config.js	환경변수 정하는 곳
  hoc(폴더)	Higher Order Component: 컴포넌트 안에 다른 컴포넌트를 갖는 function 여러가지 컴포넌트를 넣어두면 그 컴포넌트들이 hoc의 컴포넌트의 기능을 이용할 수 있음. ex) 'Auth'라는 hoc안에 'admin in component', 'logged in component' 등을 넣어두면 admin과 logged 컴포넌트가 자격을 확인해주는 auth기능을 이용할 수 있음.
  utils(폴더)	여러 페이지에서 쓰일 수 있는 것들을 utils에 넣어두면 어디서든 쓸 수 있음.
  _actions, _reducers (폴더)	Redux를 위한 폴더들. (일단 사용X)

📒React Router Dom 다운로드

• 페이지에서 페이지로 이동할 때 필요함.
• npm install react-router-dom --save
• https://reactrouter.com/web/example/basic

React Router: Declarative Routing for React