1. 개요

앱 라우터에서 데이터를 가져오는 방법

2. 사용법

페이지 라우터에서의 방법

getServerSideProps, getStaticProps 등등 특수한 함수를 사용

• 데이터 드릴링으로 props를 넘겨줘야하는다는 문제점이 있는데 앱라우터에서 개선

앱라우터

데이터가 필요한 컴포넌트에서 직접 데이터를 페칭한다.

사용법

1. 데이터를 불러올 컴포넌트에 async를 붙여 비동기로 불러올 수 있게 한다.

2. const response = await fetch(`서버주소`);
   if(!response.ok) {
       return <div>Error...</div>
     }
   const 이름 = await response.json();

3. 2번과 같이 await와 함께 데이터를 불러오는 함수를 컴포넌트 안에서 작성가능
4. 만약 한페이지에 여러개의 api를 사용한다고 하면 컴포넌트를 분리해 각각 api에 맞는 컴포넌트를 작성 후 해당 컴포넌트를 넣어준다.