라우팅?

패킷의 전송 경로를 지정하는 네트워크 계층의 가장 중요한 역할이라고 할 수 있고, 들어온 패킷을 어느 출력 경로를 통해 다음 호스트로 전달해야 가장 효과적일지 결정하는 것이라고 볼 수 있으며, 소프트웨어적인 요소라고 볼 수 있습니다. 라우팅은 2가지 종류로 나누어진다.

정적 라우팅 (Static Routing)

import { useRouter } from "next/router";

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

    const onClickBoardMove1=()=>{
        router.push('/111101/1번로그인페이지') 
    }
    const onClickBoardMove2=()=>{
        router.push('/111101/2번로그인페이지')
        
    }
    const onClickBoardMove3=()=>{
        router.push('/111101/3번로그인페이지')   
    }
    
    return(
        <div>
            <button onClick={onClickBoardMove1}>첫번째 로그인페이지</button>
            <button onClick={onClickBoardMove2}>두번째 로그인페이지</button>
            <button onClick={onClickBoardMove3}>새번째 로그인페이지</button>
        </div>
    )
}

export default staticRouter;

위 예시함수를 보면 /login 페이지는 누가 언제 접속해도 항상 로그인 페이지가 나올수 있도록 ! 이러한 페이지로 이동하는 것을 "정적 라우팅한다"고 합니다.

const callGraphqlApi = async() =>{
        try{
            const result = await callApi ({
                    variables : {
                        writer:writer,
                        title:title,
                        contents:contents
                    }
            });
            setData(result.data.createBoard.message);   
      router.push(`/05-08-dynamic-routed-input/${result.data.createBoard.number}`);
            
        } catch (error){
            alert(error);
        }
    }

router.push( 05-08-dynamic-routed-input/${사용자가 클릭하는 게시판 번호})

게시판 상세보기와 같은 경우, 글 번호에 따라서 주소가 변경됩니다.

하지만, 이러한 경우에는 게시글이 많아지게 되면 각각의 글 번호에 따라 페이지를 정적라우팅을 해주기는 어렵고 유지보수 하기도 어렵다 때문에 이러한 라우팅을 효과적으로 처리하기 위해서 동적 라우팅을 사용한다.

outer.push(url, as, options)
url: UrlObject | String- 탐색할 URL입니다
as: UrlObject | String- 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터입니다.
options- 다음 구성 옵션이 있는 선택적 개체:
scroll- 선택적 부울, 탐색 후 페이지 맨 위로 스크롤을 제어합니다. 기본값:true
shallowgetStaticProps: 다시 실행 하지 않고 현재 페이지의 경로를 업데이트 getServerSideProps하거나 getInitialProps.
기본값:false
locale- 선택적 문자열, 새 페이지의 로케일을 나타냅니다.