[Day 28] 2022-0801 : SPA와 리액트 라우터/ useNavigate

오늘 배운 것

• SPA Single-Page Application 의 장점과 단점
• 리액트 라우터 라이브러리 사용 방법
• useNavigate 컴포넌트 활용

[React] SPA 는 무엇인가? / React Router 활용하기

새롭게 알게된 것

SPA

• 하나의 페이지로 구성된 웹 애플리케이션으로, 전체 페이지중 변화되는 부분만을 업데이트하여 새로고침 하지 않고 화면 전환을 할 수 있다는 장점이 있다. 모든 데이터 리소스를 클라이언트 사이드에서 렌더링하는 CSR (클라이언트 사이드 렌더링) 방식이다. 

React Router

• 리액트를 활용해 SPA 를 만들기 위해서 사용한다. 즉 여러개의 화면에 각각의 경로를 지정해두고, 새로고침 없이 화면을 전환할 때 사용하는 리액트의 라이브러리이다. 
• 사용되는 컴포넌트는 BrowserRouter, Routes, Route, Link 가 있다. BrowserRouter가 모든 라우터 컴포넌트의 최상단에 위치해야하는데 편의를 위해 전체 컴포넌트의 최상단에 위치하게끔 코드를 짠다. 
• Link란 a 태그와 비슷한 역할 즉, 클릭하면 다른 페이지로 이동시켜주는 기능을 하는 컴포넌트이다. 다만 a 태그는 클릭시 처음부터 렌더링 즉 새로고침이 발생하지만 (깜빡임) Link는 그것을 방지하는 기능이 내장되어 있다.
• Link와 비슷한 것으로, useNavigate가 있다.

useNavigate

• useNavigate 훅은 페이지를 이동시킬 수 있는 함수를 리턴한다. 이 함수의 전달인자로 페이지 주소 혹은 -1, -2같은 이전 히스토리를 전달하면 함수가 실행될 때 페이지 이동이 발생한다.
• Link  컴포넌트를 사용할때는 해당 컴포넌트를 클릭해야 해당 경로로 이동하지만, useNavigate 는 함수이기 때문에 특정한 조건일 때 페이지를 이동하도록 할 수 있다. 

import {Link, useNavigate} from 'react-router-dom';

// Sidebar 컴포넌트
const Sidebar = () => {

  const navigate = useNavigate();
  // 이 함수가 실행되면 /mypage 경로로 이동한다.
  function handleClick2() {
    navigate('/mypage');
  }
  
  // 이 함수가 실행되면 직전 히스토리 경로로 이동한다.
  function handleClick1() {
    navigate(-1);
  }

  return (
    <section className="sidebar">
    
    // Link 컴포넌트 내부 요소를 클릭하면 지정된 경로로 이동.
      <Link to="/">
        <i className="far fa-comment-dots"></i>
      </Link>
      <Link to="/about">
        <i className="far fa-question-circle"></i>
      </Link>
      <Link to="/mypage">
        <i className="far fa-user"></i>
      </Link>

	  // onClick 이벤트로 navigate 함수를 전달해 클릭시 실행되도록 한다. 
      <div onClick={handleClick2}>2마이 페이지 이동</div>
      <div onClick={handleClick1}>1페이지 전</div>
    </section>
  );
};

SUMMARY

보완할 점

• useNavigate 훅을 실무에서 많이 사용한다고 한다. 예시로 로그인 상태인지 아닌지를 판별해 화면을 다르게 띄워줄 수 있다. 연습할 수 있는 예제를 만들어보면 좋을 것 같다.

느낀 점

• 오늘 과제를 통해서 리액트 라우터를 활용해 3개의 다른 화면에 각각 경로를 지정하고, Link를 통해 이동하도록 만들는 간단한 실습을 했다. 아직 jsx 문법이 많이 낯설기도 하고 여러 컴포넌트로 분리한다는 개념도 익숙치 않아서 다소 헷갈렸다. 다만 화면을 변경하는 작업이 (문법상으로는 그리고 아직까진) 생각보다는 크게 어렵지 않은 것 같았다. 
• 내일부터 드디어 state와 props를 공부하는 날이다. 전에 잠깐 공부한 적이 있어서 무엇인지 개념은 아는데 어떻게 서로 영향을 주고 받으면서 연결되는지는 잘 와닿지가 않는다. 내일은 개념에 많이 익숙해진다는 느낌으로 접근해야지.