SPA란? React를 사용하는 이유

리소스를 관리하는 서버가 존재하고, 리소스를 소비하려는 다수의 클라이언트가 있는 REST API로 프로젝트를 진행했다.

그러나 HTML 파일이 다수고, 페이지를 이동하면 그때마다 새로운 페이지를 받아오는 방식으로 진행해 왠지 모르게 찜찜했다. 

하여 single page application을 적용해본다. 

 

목차

• SPA란?
• React를 쓰는 이유는?
• 다운로드 환경 설정
• 기본 문법, JSX?
• 백엔드 서버랑 연결하는 방법

---

SPA이란?

웹이란 무엇인가. 결국 어딘가에 저장한 데이터를 가공해서 화면에 쏘는 기술이다. 

과거에는 저장한 데이터를 여러 페이지로 만들어 통신해도 문제가 없었다. 

하지만, 서비스가 고도화 되면서 한 페이지 마다 발송해야하는 데이터의 크기가 커졌다. 

 

새로운 페이지를 발송할때마다 사용하는 컴퓨터 자원, 속도 저하 등등이 불편함을 만든다. 

 

SPA는 이를 해결하고자 나온 기술이다. HTML 페이지들을 객체에 저장하고, 하나의 Single Page에서 필요할때마다 불러내서 JS로 교체해서 사용하는 기술이다. 

 

그래서 왜 써야 할까? 

single page의 초기 구동 속도는 느릴지라도, 한번 로딩되면 페이지 이동할때 속도가 빨라진다. 새로고침 없이 어플리케이션을 쓸 수 있다. 

무슨 소리냐면, 사용자 입장에서 편의, 회사 입장에서 수익이 올라간다.  

 

아마존, 쿠팡, 무신사 같은 곳에서 물건을 구매한다고 생각해보자,

장바구니에 물건을 담고, 결제하려고 하는데 페이지 로딩이 한 세월 걸린다면?

(실제로 SPA를 사용하면 소비자 구매 전환률이 상승했다고 한다.)

 

https://www.huskyhoochu.com/what-is-spa/

SPA(Single Page Application) 이란?

---

React.js 사용하는 이유

React는 SPA를 좀 더 잘 만들 수 있게 도와주는 프레임워크 중 하나이다. (3대장, Vue, Anguler, React) 

클라이언트 사이드 렌더링을 지원한다. 즉, 새로고침 없이 어플리케이션을 사용할 수 있다. 

 

React를 쓰는 가장 큰 이유는 데이터 바인딩 기능이다. 

페이지에 보여주고 싶은 데이터를, 간단한 { }나 react 문법으로 손 쉽게 조작할 수 있다. 

 

https://velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)

---

 

사용법 1) 다운로드

1) Node.js 최근 버전을 다운로드 -> 이미 다운되어 있어도 최신 버전으로 다운로드

왜? node.js는 싱글 스레드 기반의 V8엔진으로 돌아가는 javascript 런타임인데 (브라우저에서만 사용하던 JS를 JVM 맨치로 외부에서 사용하게 해준다는 뜻) 다운로드 하면 npm 패키지가 같이 설치 된다. (npm으로 react 설치, 라이브러리 관리)

 

2) Terminal에 아래의 명령어를 입력하면 프로젝트 초기 설정 완료. 

npx create-react-app my-app

---

 

기초 문법

 

1. JSX 문법

- html 이랑 비슷하게 생겼다. attribute가 카멜케이스 방식을 따른다. 

-변수, 함수 등을 { }를 사용해 쉽게 바인딩 할 수 있다.  

<코드>

render() {
    const text = 'JSX 문법을 사용하면 데이터 바인딩이 쉬워요'
    function test() {
      return "함수도 동적으로 추가 할 수 있어요";
    }

    let todoItems = this.state.items.map((item, idx) => (
      <Todo item={item} key={item.id} />
    ));

    return(
      <div className="App">
        <div className="black-nav">
          <div>Todo list</div>
        </div>
        
        <h4>{ text }</h4>
        <h4>{ test() }</h4>
        <h4>{ todoItems }</h4>
        
      </div>
    );
  };

<결과>

화면

 

 

2. Hooks

 

JS ES6의 destructuring 문법과 useState문법을 이용하면 자주 바뀌는 새로고침 없이 쉽게 조작할 수 있다. 

(낚시 바늘로 저장공간(state)을 hooks 가져온 다음에 바꿔서 Hooks 라고 하는 듯)

 

<사용법>

1) useState 임포트 하기  

2) 변수, set변수 = useState(값);  - 선언 및 할당

3) onClick 이벤트에 "set변수"를 사용해서 값 변경

 

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

 

https://velog.io/@velopert/react-hooks

리액트의 Hooks 완벽 정복하기

 

 

3.Props

 

부모/자식 Component가 있다면,

부모의 State를 자식이가져 다가 쓰고 싶을때 Props 문법을 사용한다.

(한번 렌더링한 데이터를 자식이 가져다가 재사용하면 당연히 컴퓨터 자원 절약)

function App (){
  let [title, setTitle] = useState(['제목1', '제목2', '제목3']);
  return (
    <div>
      ...
      <Modal title={ title }></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h2>제목 { props.title[0] }</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

---

 

 

 

 

백엔드와 연결하는 방법

SPA을 사용하면 single page application, 서버 application 이렇게 2개 이상의 독립적인 어플리케이션이 생겨버린다. 

포트 번호 또한 React는 3000, 스프링 8080 두개가 생긴다. 

 

어떤 원리로 연결할까? 

 

백엔드 서버 API의 데이터를 프론트의 JS fetch API를 사용하는 방법으로 연결 할 수 있다. 

이때 보안과 관련한 CORS 문제를 백엔드에서 해결해주어야 한다. 

 

마운팅이란?  mounting 

리액트에서, 생성자와 Render() 함수를 실행해서 DOM 트리를 만드는 과정을 마운팅(Mounting)이라고 한다. 

먼저 화면을 구성하고, 서버 api에서 콜한 데이터를 화면에 쏴주어야하는데, componentDidMount 함수를 만들어 가져오는 것까지 마운팅이다. 

 

CORS  문제

Cross-Origin Source Sharing의 약자로 웹의 보안 방침이다. 

처음 리소스를 제공한 도메인(localhost:3000)과 현재 요청하려는 도메인(localhost:8080)이 다르면 웹 보안상의 오류를 발생시킨다. 

하여, 서버쪽에 CORS를 허용해주는 설정, 클라이언트쪽에 서버에서 받아온다는 설정을 해주어야한다.