230920 - Next param

오늘 내가 배운 것

1. URL의 param 얻기

URL의 param 얻기

CRUD를 할 때 특정 글을 보거나 수정하거나 삭제하기 위해서 동적 매개 변수인 url의 param를 이용해서 해당 글을 찾아서 그 내용을 보여주거나, 수정하고, 삭제할 수 있는 기능을 구현할 수 있다.

커뮤니티 게시글에 대한 url이 아래와 같을 때

https://a.com/user/:id

여기서 id값이 특정 게시물마다 바뀌며 이 id 값을 param이라고 한다.

 

 

 

1-1. Client Component

클라이언트 컴포넌트에서 params 얻기 위해서 useParams라는 client component hook을 이용해서 얻을 수 있다.

const params = useParams()

이 hook은 클라이언트 컴포넌트에서만 사용 가능하므로, 서버 컴포넌트에서는 사용할 수 없다. 그렇기 때문에 클라이언트 컴포넌트에서 params를 얻기 위해서 새로운 파일로 해당 로직을 분리하고 상단에 'use client'를 이용해서 client compnent로 변경하게 되면 useParams()를 이용해서 id 값을 구할 수 있다.

 

 

 

1-2. Server Component

서버 컴포넌트를 이용하는 방법은 서버 사이드 라우팅 라이브러리를 이용하는 방법과 Next.js에서 제공하는 getServerSideProps, getStaticProps를 이용하는 방법이 있다.

export async function getServerSideProps(context) {
    const { id } = context.params

    return {
        props: {
            id,
        },
    }
}

Next.js의 페이지 컴포넌트에서만 이용이 가능하다. 이를 이용해서 렌더가 되기 전 server에서 처리 후 데이터를 클라이언트 측으로 전달한다.

 

---