[Next.js] context를 이용해보자! + TypeScript

 

 

SSR context

 

 

getServersideProps를 사용해 서버렌더링을 하면서 context에서 서버 요청 정보를 가져오려고 context를 사용하려고 했다. context라는 매개변수는 현재 브라우저에서 요청 받은 정보들이 들어있다. 해당 요청에서 query를 사용해 데이터를 렌더링하려고 했으나 context의 타입을 지정해야 했는데...
에러로 인해 context의 정보가 나오지 않아 타입을 지정할 수 없었다. 검색결과 !

 

 

Next에서 제공하는 Props를 위와 같이 getServerSideProps의 타입으로 지정해주면 되었다.

 

 

위의 context의 console을 찍어보면 객체형태로 접속 요청에 대한 모든 정보를 보관하는 것을 볼 수 있다. 사용자의 요청을 context로 서버딴에서 받아 사용할 수 있다.

 

 

사용자의 상호작용으로 서버에 요청 중 query라는 프로퍼티를 가져와 SSR에서 쓰면 된다.

 

 

console.log(context.query.q)로 원하는 프로퍼티의 value를 가져올 수 있다. 

 

 

그러나 q의 타입은 string이거나 string[] 일 수 있기 때문에 안전하게 데이터를 처리해줘야 한다. 먼저 q가 문자일 경우와 배열일 경우 둘 다 타입으로 예외처리를 해주면 된다.

 

 

export const getServerSideProps: GetServerSideProps = async context => {
  const { q } = context.query;

  let countries = [];
  if (q) {
    if (typeof q === "string") {
      countries = await fetchSearchResult(q);
    } else {
      countries = await fetchSearchResult(q[0]);
    }
  }
  return {
    props: {
      countries,
    },
  };
};

위 코드로 수정해여 q가 string 타입일 때와 string[] 타입일때 모두 적용하여 오류를 방지할 수 있다.

 

 

그러나 SSR로 받은 데이터의 countries는 Korea로 검색되었는데, 해당 국가는 하나의 객체가 아니라 두 개의 객체가 담긴 배열로 들어왔다. countries를 이전에 interface 객체로 저장해두어서 import로 꺼내쓰려고 했는데, 이렇게 배열로 들어오게 되면 배열로 들어오는 경우도 타입을 지정해주어야 한다. 

처음에는 객체와 배열 모두 타입을 지정해주어야 하나 생각했는데, 그럴 필요없이 모두 배열로 지정해주면 된다. 새로운 SearchProps를 작성하여 contries가 Country[]임을 지정해주자.

 

 

그리고 새로 작성한 SearchProps를 contries의 타입으로 정해주면 된다.

 

 

이제 오류없이 데이터가 잘 들어오는지 확인해보자!

위와 같이 배열과 객체 모두 데이터가 잘 들어오는 것을 확인해 볼 수 있다.