SPA(Single Page Application)

SPA:페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성이 되어서 유저가 새로운 페이지를 요청 할 때 마다 페이지가 새로고침되고 로딩할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 하는 방식입니다.

웹에서 제공되는 정보가 많아질수록 위와 같은 전통적인 방식은 속도 측멱에서 문제가 있습니다. 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 캐싱으로는 한계를 극복하기 힘들었습니다. 또한 렌더링하는것을 서버쪽에서 담당한다는 것은 , 그 만큼 렌더링을 위한 서버 자원과 트래픽이 낭비되는 것입니다.

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줍니다.

SPA의 단점

SPA의 단점은, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것 입니다. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문입니다. 하지만 Code Splitting 같이 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선시킬 수 있습니다.

1-1 프로젝트 생성 및 라이버러리 설치

1) create-react-app으로 프로젝트를 생성합니다.

2)해당 프로젝트 디렉토리로 이동해서 리액트 라우터를 설치합니다.

• react-router-dom: 브라우저에서 사용되는 리액트 라우터입니다.
• cross-env: 프로젝트에서 NODE_PATH를 사용하여 절대경로로 파일을 불러오기 위한 환경 변수를 설정 할 때 운영체제마다 방시이 다르므로 공통적인 방법으로 설정 할 수 있게 해주는 라이브러리입니다.

3)리액트 라우터 설치 후 src/App.js , src/App.css , src/App.test.js, src/logo.svg를 삭제해줍니다.

4)NODE_ENV 설정: 코드를 불러올때 '../components/Something' 이런식으로 불러와야하는 코드를 'components/Something'이렇게 불러 올 수 있도록 프로젝트의 루트경로를 바꾸기 위해 package.json 파일의 script 부분을 다음과 같이 수정해야 합니다.

5)컴포넌트 준비하기: src/index.js에서 앞으로 만들 src/pages/Login.js 같은 파일을 index.js에 맞춰 수정해야 합니다.

1-2 Route 와 파라미터

1) 기본 라우트 준비하기: 주소에 아무 Path도 주어지지 않은 기본적인 Home 라우트를 생성해줍니다.

그리고 같은 형식으로 된 About도 생성하고 이 페이지는 /about 경로로 들어왔을 떄 보여줄 페이지로 설정합니다.

이제 이 컴포넌트들을 불러와서 한 파일로 내보낼수 있도록 인덱스를 아래와 같이 만듭니다.

2) 라우트 설정하기: 이제 라우트에 맞춰 App 컴포넌트를 다음과 같이 작성합니다.

라우트를 설정 할 때에는 Route 컴포넌트를 사용하고, 경로는 path 값으로 설정합니다.
첫번째 라우트는 exact를 활용하여 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여주게 됨으로 / 으로 Home 컴포넌트를 보여주게 합니다.
두번째 라우트 /about 에서는 path를 통화여 about 컴포넌트를 보여주게 합니다.

1-3 Route 이동하기

1) Link 컴포넌트 사용방법

• Routes.js 에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.
• react-router-dom 에서 제공하는 Link 컴포넌트는 DOM에서 a 로 변환(Compile) 됩니다.
• a vs Link
  - a: 외부 사이트로 이동하는 경우
  • Link: 프로젝트 내에서 페이지 전환하는 경우

2) withRouterHOC로 구현하는 방법

• Link를 사용하지 않고 요소에 onClick 이벤트를 통해 페이지를 이동하는 방법도 있습니다.
• goToMain라는 event handler에서 구현한 것 처럼 props 객체의 history (this.props.history) 에 접근해서 이동할 수 있습니다.
• console.log 로 this.props.history에 어떤 정보들이 담겨 있는지 확인 할 수 있습니다.
• 받은 history의 push 메서드의 인자로 Routes.js 에서 설정한 path를 넘겨주면 , 해당 라우트로 이동 할 수 있습니다.
• 이 컴포넌트 (Login컴포넌트)에서 props 에 route정보 (history)를 받으려면 export하는 컴포넌트에 withRoutuer로 감싸주어야 합니다.

3) 두 가지 방법의 활용법
1. Link
- 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
- ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
2. withRouterHOC
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현합니다.
- ex. 로그인 버튼 클릭 시
- Backend API로 데이터(User Info) 전송
- User Data 인증 / 인가
- response message
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동