React SPA

SPA

전체 페이지를 요청마다 렌더링 하는 것이 아니라 필요한 부분만 렌더링하는 것

장점

• 사용자 경험이 향상된다. 깜빡이지 않고 부드럽게 웹을 사용할 수 있다.
• 서버 부하가 줄어든다, 서버에서는 json형식의 데이터만 받아온다.

단점

• 초기 로딩속도가 느리다. 최초 static 파일을 받아오는데 시간이 오래걸린다.
• 검색엔진 최적화가 어렵다.

React Router

Browser Routers는 html history api를 활용함
React Router에서 일반적으로 사용하는 요소, 아래에 차례대로 import 되어있다.

• router
• route matchers
• route changers
• Link

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

활용법

라우트 매처를 jsx에 삽입하고, url과 컴포넌트를 매칭해준다.
라우팅을 호출하는 컴포넌트는 로 to 속성에 해당되는 url을 매칭해준다.

<BrowserRouter>
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Routes> //route matcher
      <Route path="/" element={<Home />} /> // route changer
      <Route path="/about" element={<About />} />
    </Routes>
  </div>
</BrowserRouter>

스프린트

동적 클래스명 할당

• Link가 아니라 NavLink 컴포넌트를 활용하고, active 상태시 추가될 클래스명을 명시

navigate함수 호출해서 페이지 간 이동하기

import { NavLink, useNavigate } from 'react-router-dom';
let navigate = useNavigate();
  
<NavLink activeClassName='active' to="/tweets">
  <i className="far fa-comment-dots"></i>
</NavLink>
  
<button onClick={() => navigate(-1)}>
  뒤로가기
</button>

스프린트 리뷰

리액트 가상 DOM

• 리액트는 전체페이지를 렌더링 하기 전에 가상 DOM에 따로 전체를 미리 렌더링 해 본후 기존의 페이지와 비교하여 달라진 부분만 렌더링한다. (기존에는 한 곳만 달라져도 모두 다시 렌더링하는 방식이다.)

• 개별 엘리먼트를 일일이 렌더링 하려면 메모리사용과, 코드량 모두 많아지는데 리액트는 이런 문제점을 가상 DOM을 활용하여 해결했다.

• 때문에 <li>와 같이 반복되는 엘리먼트에는 key 속성이 필수인데, 리액트 가상 DOM에서 다시 렌더링할 대상을 결정하기 위해서 key라는 유니크한 밸류가 필요하기 때문이다.

• 리액트에서 키값을 자동으로 지정해주는 라이브러리도 존재한다.

코드스테이츠 과제 제출 내역 확인하기

$npx codestates-assignment-manager login