2022/11/24 - Route

라우터

CSR

장점 : 서버측 렌더링보다 훨씬 빠르다. 그에 따라 사용자 경험이 크게 향상됩니다

단점 : 검색 엔진이 이를 인식하지 못할 경우 웹사이트가 검색에 잘 노출되지 않은 문제를 보일 수 있따. 앱 모듈 최적화가 안된 경우, 첫 페이지 방문 시 늦게 표시될 수 있다.

SSR

장점 : 훨씬 더 많은 트래픽을 유도하고 검색 순위에도 잘노출되고 첫로딩이 생성된 HTML 코드를 포함한 파일이 전송되므로 CSR보다 빠릅니다.

단점 : 다른 페이지를 탐색하는 사용자 경험은 CSR 보다 느립니다. 모든 사용자의 호라동 정보를 서버에서 관리 해야 해 서버의 부담이 더 큽니다. 높은 수요가 발생할 경우 큰비용이 발생합니다.

React Router

1. react-router-dom하나만 설치해도 되지만 종종 vs code에서 이를 같이 인지 못하는 경우가 있어서 react-dom을 설치하는 경우도 있다.

import {BrowserRouter, HashRouter} from "react-router-dom'

function App(){
	return(
		<BrowserRouter>
			<div className="">
				<h1>React Router v6</h1>
			</div>
		
		<Route path="/" element={<Home/>}/>
		<Route path="/intro" element={<Introduction/>}/>
		<Route path="/contracts" element={<Contacts/>}/>
		</BrowserRouter>
	)

}

URLSearchParams

⇒ ‘?cdn=news_media_pc&type=editn’ 과 같이 복잡한 parms를 다음과 같이 사용하면 간단하게 정리할 수 있다.

const search = new URLSearchParams(something)

useSearchParams

위에 있는 URLSearchParams를 react에서 사용하는 방법이 useSearchParams이다.

useNavigate

⇒history를 관리한다

useLocation

window.location과 비슷하다.

⇒location에서의 state값은 현재 페이지의 값의 정보를 가지고있다. 어디에서 어떤 일을 하려고하는지 알 수 있다.

a:hover:not(:disabled){

}

//disabled가 아닌 상태에서 hover가 되었을 때를 의미하는 css

선언형 - <Navigate>

<Navigation to ="/dashboard" replace={true}/>
//로그인을 시도할때 로그인중간 내용은 저장할 필요없기 때문에 사용하는 것이
//replace 이다.

명령형 - useNavigate

redirect기능이라고 보면된다

Navigate와 useNavigate 둘의 차이는 명령형이냐 선언형이냐의 차이인데, useNavigate를 사용하면 컴포넌트 안에서 확인해야할 사항들이 줄어들기 떄문에 Navigate를 사용하는 것은 경우도 있다.

useRoutes

라우트를 객체로 그릴 수 있다.

const RouteConfig = () =>{
	useRoute([
		{path:'/', element:<Home />},
		{path:'/books', element:<Books /> , children: [{
			index:true, element:<h2>도서를 입력하세요</h2>
			{path:':isbn', element:<Book/>}
			}]},
		{path:'/Consumers', element:<Consumers /> , children:[{
			index:true, element:<h2>고객의 이름을 선택하세요!</h2>
			},
		{path:':id', element:<Consumer />}]
		}
])
}

“*” 라우트 와일드

404페이지에 사용하는 지정된 페이지를 제외한 모든 페이지로 이동시키는 path이다. 배치는 순서와 상관없다.

flux vs redux

flux 여러개의 스토어 가능하다. redux 단 한개의 스토어를 이용해야한다.

createContext 연습

const AuthContext = createContext();

export const AuthProvider = (props) => {
  const [auth, setAuth] = useState(false);

  const value = {
    auth,
    isAuth: !!auth,
    logIn() {
      return new Promise((res) => {
        setAuth(true);
        res();
      });
    },
    logOut() {
      return new Promise((res) => {
        setAuth(false);
        res();
      });
    },
  };

  return <AuthContext.Provider value={value} {...props} />;
};

export function useAuth() {
  return useContext(AuthContext);
}

export const withAuth = (Component) => {
  return function WithAuthHOC(props) {
    const value = useAuth();
    return <Component auth={value} {...props} />;
  };
};

컨텍스트에 따라 로그인 주소로 옮기기

import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from 'contexts/auth';

export function RequiredAuth({ children }) {
  const { isAuth } = useAuth();
  const location = useLocation();
  return isAuth ? (
    children
  ) : (
    <Navigate
      to="/login"
      state={{
        from: location.pathname,
      }}
    />
  );
}

권한 페이지 구분하는 방법

{
      path: '/browse',
      element: (
        <RequiredAuth>
          <Browse />
        </RequiredAuth>
      ),
    },
    {
      path: '/dashboard',
      element: (
        <RequiredAuth>
          <Dashboard />
        </RequiredAuth>
      ),
    },
    {
      path: '/books',
      element: <Books />,
      children: [
        {
          index: true,
          element: <h2>도서 이름을 선택하세요.</h2>,
        },
        {
          path: ':isbn',
          element: <Book />,
        },
      ],
    },

로그인 권한이 필요한 페이지 같은경우 RequiredAuth를 감싸면 된다.