React.js 프로젝트 데모 실습

리액트를 연습하면서 구현해야되는 기본틀을 연습하려고 한다.

DB조회는 나중에 하고 현재는 로그인 페이지를 구성해서 로그인버튼을 클릭하면 메인페이지로 전환을 하고 

메인페이지에서 SPA(Single Page Application)구조로 구현하도록 한다.

node 버전 정보 : node-v10.24.0-x64 로 설정

라이브러리 설치

yarn add node-sass

yarn add react-virtualized

소스 주소 :  https://github.com/sksmail/react-project-demo

sksmail/react-project-demo

구현되는 화면 정의

로그인 화면

메인 영역을 세개의 영역으로 구분하여 구성 

 

구현된 화면은 다음과 같습니다.

 

구현을 하기 위해 참조한 사이트

https://qvil.github.io/react/react-router-v4/

[React Router v4]SPA에서 다중페이지 구현(Feat. 성능최적화)