페이지를 이동해보자 : Routing

페이지를 이동하는 과정에서 알아야 할 단어가 있는데,

• routing : 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정
• router : 컴퓨터 네트워크 간에 데이터 패킷을 전송하는 네트워크 장치

💡 React 에서 router,routing 이 뭘까?

• rounting : 주소에 따라 다른 페이지를 보여주는 것
• rounter : Next.js에서 페이지를 이동시킬 수 있게 도와주는 것

쉽게 말하자면 페이지를 이동을 위한 routing 과정을 router를 통해 하는 것이다.

React-router를 어떻게 사용해야할까?

import {useRouter} from 'Next/router' // ⭐️ Next.js에 있는 라우터파일 불러오기 

export default function Page(){
  const router = useRouter() //이렇게 조건을 설정해주고

  rounter.push("이동할 페이지 주소") //이동할 페이지의 주소를 적어준다.
}

여기서 이동할 페이지에 대한 주소를 하나씩 넣어주는 것을 정적 라우팅(static routing)이라고 한다.

하지만 게시판이나 프로필 등 수많은 페이지가 만들어질때마다 그에 대한 파일, 폴더를 만들어 연결해주긴 힘들다.
그래서 동적 라우팅(Dynamic routing)을 활용하는 것이다.
변수로 사용될 폴더를 하나 생성한 뒤 index파일 하나만 만들어주면 파일은 하나지만 변동되는 데이터에 대한 새로운 주소로 연결을 해준다.

💡 TIP ! link 태그나 a 태그와의 차이점은 ?

페이지를 이동할 수 있다는 점은 같지만 link나 a태그는 연결해주는 주소마다 파일이 있어야하고 그 파일의 주소를 연결해주는 반면 동적 라우팅을 통해 하나의 index로 여러 페이지로 이동이 가능하다는 점이다.

오늘 배운 코드로 한 번 더 살펴보자면,

import {useRouter} from 'next/router'  //라우터를 불러오고

export default function DynamicRountingPage(){
    
    const router = useRouter()

    const onClickMove1 = ()=>{ //버튼을 클릭하면 발생될 이벤트 핸들러함수
        router.push("/05-06-dynamic-routed-board/1")
    }
    const onClickMove2 = ()=>{
        router.push("/05-06-dynamic-routed-board/2")
    }
    const onClickMove3 = ()=>{
        router.push("/05-06-dynamic-routed-board/3")
    }
    const onClickMove4 = ()=>{
        router.push("/05-06-dynamic-routed-board/4")
    }
    const onClickMove100 = ()=>{
        router.push("/05-06-dynamic-routed-board/100")
    }
    //05-06-dynamic-routed-board 폴더에는 하나의 index.js파일 뿐이지만 /100,/4,/1 등 다른 값을 넣으면 그 값에 대한 새로운 페이지로 연결된다.

    return(
        <div>
            <button onClick={onClickMove1}>1번 게시글로 이동하기</button>
            <button onClick={onClickMove2}>2번 게시글로 이동하기</button>
            <button onClick={onClickMove3}>3번 게시글로 이동하기</button>
            <button onClick={onClickMove4}>4번 게시글로 이동하기</button>
            <button onClick={onClickMove100}>100번 게시글로 이동하기</button>
        </div>
    )

}

끝으로,

추가로 배우는 기능들이 있을테니 꾸준히 채워가는 것으로 하고, 배우는 기능이 많아지면서 다양한 기능들을 추가하고 그 과정이 익숙해지기 위한 연습이 많이 필요할 것이다.