트위터 클론코딩 - 내비게이션 추가하고 로그아웃 처리하기

목표 - 사이트를 이리저리 옮겨 다닐 수 있도록 내비게이션 추가!

액션1 - 내비게이션 컴포넌트 만들고 라우터에 추가하기

내비게이션 컴포넌트는 라우터가 제어

components 폴더에 Navigation.js 파일 생성

const Navigation = () => {
  return <nav>This is Navigation</nav>;
};

export default Navigation;

이어서 내비게이션 컴포넌트를 만들고 라우터와 연결

const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
    {isLoggedIn && <Navigation/>}
      <Routes>
        {isLoggedIn ? (
          <Route path="/" element={<Home />} />
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </BrowserRouter>
  );
};

isLoggedIn 이 true, false에 따라 컴포넌트를 화면에 렌더링 할 수 있음

<Routes>는 Routes에 포함된 <Route> 중 하나만 보여주므로 Routes 에 포함시키지 않고

위에 배치해서 모든 페이지에 보이도록 만듦

but, 회원가입이나 로그인 페이지에서는 내비게이션이 보일 필요가 없어서

isLoggedIn 이 true일 경우에만 보이도록 함

로그인 시 네비게이션이 나옴

액션 2 - 내비게이션에 링크 추가하기

내비게이션 컴포넌트에 여러 링크를 추가해서 링크로 이동할 수 있게

리액트에서는 a 앨리먼트 대신에 react-router-dom 의 Link로 페이지 이동을 구현할 수 있다.

import { Link } from "react-router-dom";

const Navigation = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/">My Profile</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navigation;

Home 컴포넌트와 Profile 컴포넌트로 이동할 수 있도록 내비게이션 뼈대 만들기.

라우터가 Home컴포넌트, Auth컴포넌트에 대한 분기만 처리 -> My Profile 링크를 눌러도 주소 표시줄에 변화만 있을뿐

실제로 컴포넌트를 렌더링하진 않음.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Auth from "routes/Auth";
import Home from "routes/Home";
import Profile from "routes/Profile";
import Navigation from "./Navigation";


const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
      {isLoggedIn && <Navigation />}
      <Routes>
        {isLoggedIn ? (
          <>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/profile" element={<Profile />} />
          </>
        ) : (
          <Route exact path="/" element={<Auth />} />
        )}
      </Routes>
    </BrowserRouter>
  );
};
export default AppRouter;

코드 path 경로를 변경해주면

Profile 컴포넌트가 렌더링된다!

액션 3 - 로그아웃까지 깔끔하게 마무리

수동으로 진행했던 로그아웃기능에 버튼을 만들어 주자

import { authService } from "fbase";

const Profile = () => {
  const onLogOutClick = () => authService.signOut();

  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

export default Profile;

<로그아웃> 버튼에 onClick 프롭스로 onLogOutClick 함수를 적용

로그아웃 버튼을 누르면 주소 표시줄이 여전히 /profile 임

액션 4 - Redirect로 로그아웃 후 주소 이동하기

Route 다음에 Redirect를 배치해서 Routes 내부에 있는 Route 조건이 다 맞지 않으면

Redirect가 지정한 곳으로 주소를 이동시키도록 코드를 수정

Redirect는 from 프롭스에 있는 값을 조건으로 생각해서 to 프롭스에 있는 값으로 주소를 이동

but,,, 또 에러발생 ;;;;;;

놀랍지도 않다..

구글링을 해보니 리액트 v6에서는 redirect에 Navigate를 활용한다고 한다

import { BrowserRouter, Routes, Navigate, Route, Link } from "react-router-dom";
import Auth from "routes/Auth";
import Home from "routes/Home";
import Profile from "routes/Profile";
import Navigation from "./Navigation";

const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
      {isLoggedIn && <Navigation />}
      <Routes>
        {isLoggedIn ? (
          <>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/profile" element={<Profile />} />
          </>
        ) : (
          <Route exact path="/" element={<Auth />} />
        )}
        <Route path="*" element={<Navigate replace to="/" />} />
      </Routes>
    </BrowserRouter>
  );
};
export default AppRouter;

기존 v5에서는 Redirect를 import 해줬지만 v6에서는 Navigate를 import 하고

Redirect대신 Route안에 path를 넣어주고 element를 사용한다

코드 설명 -> Routes는 isLoggedIn 상태를 보고 두 Route 로 분기하는데 로그아웃 처리가 끝난 상태면 isLoggedIn은

false상태, 그렇다면 false로 분기하는 Route 가 동작해야함 path ="/" 는 정확하게 주소가 "/" 경우에만 해당,

그런데 <로그아웃> 버튼을 누른 다음의 주소는 "/profile"

그러므로 isLoggedIn이 false인 경우에 동작해야 하는 Route도 무시

결국 Navigate가 동작

초기화면으로 잘 이동된다.

액션 5 - useHistory로 로그아웃 후 주소 이동하기

두번째 방법은 라우터가 아니라 useHistory 를 이용해서 자바스크립트로 리다이렉트 시키는방법

로그아웃을 처리하는 자바스크립트 코드 마지막에 처음 화면으로 이동하라는 명령을 내리는것,

useHistory에는 push라는 함수가 있는데 push함수가 주소를 이동시켜줌

+(페이지의 새로고침이나 뒤로가기 기능이 가능한것도 history 덕분)

기존에 Redirect 역할을 한 Navigate 부분을 지워주고

Profile에 useHistory 기능을 써주자

근데 이것도^^.. v6에서는 useHistory대신 Navigate가 쓰인다고하네욜

import { authService } from "fbase";
import { Navigate, useNavigate } from "react-router-dom";
const Profile = () => {
  const history = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    history("/");
  };

  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

export default Profile;

History 대신 Navigate를 사용하고 useHistory대신 useNavigate 사용

별별일상