[SEB FE 44] React Router & UseNavaigate

✍ 복습 자료

• Daily Coding

let output = convertDoubleSpaceToSingle('string  with  double  spaces');
console.log(output); // --> "string with double spaces"

function convertDoubleSpaceToSingle(str) {
  return str.split('  ').join(' ');
}

// 입력 : string => str
// 출력 : string => 문자열

// 두 칸을 초과하는 공백은 존재X

// str.split(' ')
// ['string', '', 'with', '', 'double', '', 'spaces']

// str.split('  ')
//  ['string', 'with', 'double', 'spaces']

• BrowserRouter

  웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 한다.

  그리고 BrowserRouter가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

  1. App.js에 적용한 모습
     
  2. index.js에 적용한 모습
     

• a 태그를 사용하지 않고 Link를 사용하는 이유?

  a 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 한다.
  하지만 Link는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.

• path를 "*"로 설정하면 어디로 이동할까?

  사용자가 지정된 주소가 아닌 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있다. 이럴 때 사용할 수 있는 속성이 path="*"이다.
  지정되지 않은 주소로 접근하면 이 속성이 설정되어 있는 컴포넌트를 보여준다.

  
  
  

📌 오늘의 알파

useNavigate를 이용한 뒤로가기 기능

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Sidebar = () => {
  const navigate = useNavigate('');

  return (
    <section>
        <i className="far" onClick={() => { navigate(-1) }}>뒤로가기</i>
    </section>
  );
};

export default Sidebar;