밸~하!

밸로그 여러분 안녕하세요!

오늘은 Shallow Routing이라는것에대해서 포스팅을 하려고 합니당!
먼저 본격적으로 들어가기 이전에 지난 포스팅에서 설명드렸던 내용을 잠깐 훑고 가곘습니다!

저번시간에는

클래스 컴포넌트의 생명주기에 대해서 배웠습니다!
그것을 함수형 컴포넌트에서는 어떻게 사용하는지 알아보았고 React에서 지원하는 useEffect라는 Hook을 사용해서 생명주기를 구현할수 있었다는것
사용하는방법은 크게 3가지로
페이지가 처음 랜더링 됬을때 실행하는 방법과 , 특정 변수가 변경되었을때마다 실행하는방법, 마지막으로 종료됬을떄 실행하는 방법 3가지로 배웠습니다!

shallow Routing??
도대체 무엇일까요??

1. shallow routing이란?

shallow routing 먼저 직역을 한번 해볼까요???

직역을 해보자면 얕은 라우팅이라고 할수있겠습니다!

음? 라우팅에도 얕은 라우팅이 있다고??
네! 그렇습니다!
바로 Next.js에서 지원하는 기능인데요!

이 얕은 라우팅을 사용하게 되면 메서드를 다시 실행하지 않고도 URL을 변경할수 있게됩니다!
무슨말인가!

바로 데이터를 fecting하는 메서드를 다시 실행하지 않고 바꿔줄수있다는거죠!
이게 뭐가 좋아? 라고 생각하실수도 있는데
가장 최고의 효과는 바로
불필요한 서버연산을 최소화하고 필요한 상태 값을 라우터에 넣어서 전달할수있다는것이죠!
이렇게 되면 더욱 효율적으로 사용할수도있게 되고 성능도 높아지겠죠!

그럼 사용방식은 어떻게 될까요??
쉽게 사용하는 방법으로는 Next.js에서 지원하는 useRouter()라는 함수를 사용하면 되는데요!

글로 설명하는것 보다는 코드를 보여드리는게 훨씬 이해하기 편하실것이기에
코드로 보여드릴수있도록 하겠습니다

import { useRouter } from "next/router";

const StaticRoutingPage = () => {
  const router = useRouter();

  const onClickMove = () => {
    router.push("/05-02-static-routed");
  };

  return (
    <>
      <button onClick={onClickMove}>페이지 이동하기!!!</button>;
    </>
  );
};

export default StaticRoutingPage;

이렇게 하면 05-02-static-routed라는 페이지로 특정이 데이터를 fetching할 필요가 없다는거죠!
이렇게 되면서버 과부화도 적게되고 효율적이겠죠??

그럼 여기서 궁금한게 생기죠??

도대체 fetching 메서드가 무엇일까요??

Next.js에서는 data fetching메서드를 제공하는데요!
사이트가 렌더링하기 전에 특정 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능들을 의미하고 있습니담

종류로는
3종류가 있는데요!

1. getStaticProps

2. getStaticPaths

3. getServerSideProps

이렇게 세 종류가있습니다!

1.getStaticProps
는 데이터를 패치해주는 함수입니다!
만약 getStaticProrps가 있다면 페이지 생성시 자동으로 실행이 되며 그안에 들어있는 props를 컴포넌트에 전송하게 됩니다

2.getStaticPaths
는 Next.js에서 동적 라우팅이 가능하게끔 만들어주는 datafething 메서드입니다!
페이지별로 라우팅을 주지 않아도 [] 를 이용해 동적라우팅이 일어나게해줍니다

마지막으로

3.getserversideprops
이 메서드는 서버사이드 랜더링을 위한 함수입니다
차이점은 빌드시가 아닌 매 req때 마다 실행이된다는 점이있습니담!

자 오늘은 shallow routing에 대해서 알아보았는데요
페이지 하나하나에 라우팅을 주는것보다 이렇게 shallow routing을 사용해서 해주게 되면 훨씬 과부화도 줄고 효율적이니 안쓸이유가 없겠죠??

부족하지만 오늘도 지식한개 쌓아가는 밸로그 여러분들 되세용~

그럼 밸~~바!