노드 리액트 기초 - 4th Day

 

이제 본격적으로 client 부분의 작업이 시작된다.

그 전에 앞서, ReactJS에 대해 정리를 하자면 React는 사용자 인터페이스를 만들기 위한 Javascript 프레임워크다.

그리고 React의 특징으로는 다음 두 가지가 있다.

 

1. Component 기반

React는 component 기반으로, 캡슐화된 component를 조합해 복잡한 UI를 설계할 수 있다.

다시 말해 재사용성이 굉장히 뛰어나다고 할 수 있다.

 

2. Virtual Dom 

Virtual Dom을 설명하기 이전에 DOM에 대해 알아보면 DOM은 Doument Object Model의 약자로, 문서 객체 모델을 뜻한다. 넓은 의미로는 웹 브라우저 HTML 페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합이다.

DOM Structure Tree

 

그렇다면 DOM(Real DOM)과 Virtual DOM의 차이점은 무엇일까?

만약 5개의 리스트가 있고 그 중 맨 앞 하나의 리스트만 변경되었다고 가정하자. 

그러면 Real DOM에서는 5개의 리스트 전부 리로드 해야한다.

하지만 Virtual DOM에서는 변경된 맨 앞의 리스트만 로드해오면 된다.

Virtual DOM에서의 과정을 보면 다음과 같다.

1. JSX를 렌더링하면 현재 상태가 메모리에 저장된다. 

2. Virtual DOM이 업데이트 되고 나면 저장된 이전의 상태와 현재 업데이트된 상태를 비교하는 diffing과정을  거친다.

3. 바뀐 부분만 Real DOM에서 변경한다.

 

Create-React-App

React App을 생성하기 이전에, 지금까지 작업해온 파일들은 모두 server 폴더 안에 넣어주고 새롭게 client 폴더를 만들어준다.

그리고나서 터미널 창에 cd client를 입력해 client 폴더로 이동하고 npx create-react-app . 을 입력하여 생성한다.

원래는 npm install -g create-react-app 을 입력하여 global  디렉토리에 다운받았는데, 이제는 npx를 이용하여 사용할 수 있고, 그렇게 할 수 있는 이유는 npx가 npm registry에서 create-react-app을 찾아서 다운로드 없이 실행시켜주기 때문이라고 한다. 

 

 

client 폴더 내 package.json

 

React App이 생성되고 나면 client 폴더 안에 있는 package.json 파일에 scripts 부분을 확인해 보면 위와 같이 작성되어 있는 것을 확인할 수 있다. 

이 script의 의미는 터미널 창에 npm run start를 입력하면 React가 실행되고, npm run build를 입력하면 build 되는 것을 의미한다. 만약 앞에 작성되어 있는 "start"를 "initiate"으로 바꾼다면 npm run initiate 명령을 통해 React가 실행될 것이다.  (client directory에서 실행시켜야 됨)

 

React App 처음 실행시킨 화면

 

현재는 서버 파트와 클라이언트 파트를 각각 실행시켜줘야 하는데, 추후 강의 내용에서 그 둘을 동시에 실행시켜주는 방법을 적용시킬 예정이다. 

 

 

이제, client 폴더 내의 구조를 다음과 같이 변경한다. 

 

 

  _action과 _reducer → Redux를 위한 폴더

  components/views → 로그인, 회원가입 등의 페이지들

  components/views/Sections →해당 페이지와 관련된 css파일이나 component들

 

  App.js → Routing 관련 처리

  Config.js → 환경 변수 지정

  hoc → Higher Order Component의 약자, auth 관리

  utils → 여러 군데에서 사용될 수 있는 것들

 

 

hoc폴더에서는 다음과 같은 기능을 구현할 것이다.

 

 

페이지 생성

각 페이지 js파일에 다음과 같은 코드를 작성한다. 

// LandingPage.js

import React from 'react' 


function LandingPage() {

	return (
    
    	<div>
        
        	LandingPage
            
	</div>
    )
}

export default LandingPage

 

// LoginPage.js

import React from 'react' 


function LoginPage() {

	return (
    
    	<div>
        
        	LoginPage
            
	</div>
    )
}

export default LoginPage

 

// RegisterPage.js

import React from 'react' 


function RegisterPage() {

	return (
    
    	<div>
        
        	RegisterPage
            
	</div>
    )
}

export default RegisterPage

 

이때 functional component를 단축키로 생성하기 위해서는 extension을 다운받으면 된다.

위 이미지에서와 같이 좌측에 있는 블록 모양 아이콘의 Extensions 카테고리에서 es7을 검색하고 가장 상단에 뜨는 extension을 install 하면 된다.

설치가 완료되면 rfce를 입력했을 때 react functional component가 생성되고, rcc를 입력했을 때 react component class가 생성된다. 

 

React Funtional Component 생성 (1)

React Funtional Component 생성 (2)

React Component Class 생성 (1)

React Component Class 생성 (2)

 

 

페이지 이동

페이지 이동에는 React Router DOM을 사용하는데, 이를 위해 터미널 창에서 cd client를 하고 npm install react-router-dom --save 를 입력하여 다운로드 받는다. 

↓참고 사이트

reactrouter.com/web/example/basic

 

// App.js

import React from 'react';

import {
  BrowserRouter as Router, 
  Switch,
  Route,
  Link
} from "react-router-dom";

import LandingPage from './views/LandingPage/LandingPage'

import LoginPage from './views/LoginPage/LoginPage'

import RegisterPage from './views/RegisterPage/RegisterPage'


function App() {

  return (
  
    <Router>
    
      <div>

        <Switch>
        
          <Route exact path="/" component={ LandingPage } />
          
          <Route exact path="/login" component={ LoginPage } />
          
          <Route exact path="/register" component={ RegisterPage } />
          
        </Switch>
        
      </div>
      
    </Router>
  );
}

export default App;

 

이제 React App을 실행시켜 localhost:3000 뒤에 각각 /login, /register를 실행시켜 보면 다음과 같은 결과를 얻을 수 있었다.

 

Landing Page

 

Login Page

 

Register Page