React Router 주요 컴포넌트

React Router DOM에서 사용되는 BrowserRouter, Link, Routes, Route에 대한 설명

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link입니다.

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.

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

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
        <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
   </BrowserRouter>
  )
}

export default App;

• useNavigate
  useNavigate는 페이지를 이동할 때 사용된다.
  Link를 써도 페이지 이동을 시킬 수 있지만 단순하게 이동만 시켜야 하는 경우 Link를 사용하면 좋고,
  useNavigate를 사용하면 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 useNavigate를 사용한다.

useNavigate는 Link컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있다.
반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.

파라미터가 숫자 타입이면 앞으로 가거나 뒤로 간다.
navigate(-1) 뒤로가기 / navigate(-2) 뒤로 2번가기
페이지 이동 시, replace 옵션이 있는데, 이 옵션은 페이지 이동 기록이 남지 않아
뒤로가기 버튼을 눌러도 이전 페이지로 이동하지 않고 정해진 페이지로만 이동한다.

• history API

• 의 위치는 컴포넌트 태그를 포함하고 있는 위치면 어디에 쓰던지 상관이 없는것인가요?

• 리액트 작동흐름
  웹팩의 번들링이 먼저인지 바벨의 변환이 먼저인지
  간단한 최초 렌더링 과정과 그 이후
  상태변화에 따른 가상 돔에서 실제 돔에 반영되는 과정이 궁금합니다
  

• element와 component의 차이

• 1. path=“”
     만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있습니다. 이럴 때 사용할 수 있는 속성이 path=””입니다. 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.
     

<Route path="*" element={} />

  //NotFound.js
const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
      <h1>.</h1>
      <h1>.</h1>
      <h1>.</h1>
      <p>이런! 존재하지 않는 페이지입니다 ㅠㅠ</p>
      <h1>.</h1>
      <h1>.</h1>
      <h1>.</h1>

      <Link to="/">Go back to the homepage</Link>
    </div>
  );
};

2. jsx문법에서 if문 대신 삼항연산자를 쓰는 이유

   <span>
   <div>
     {dummyTweets.length > 5 ? "트윗 글이 많네요": "트윗 글이 적네요"}
    </div>
   </span>