props 전달 질문

Question

index.tsx에서 const Home = ({ allPostsData }: 이 부분의 allPostsData가 어디에서 온건지 이해가 안됩니다. index.tsx 에서 밑에 export const getStaticProps: GetStaticProps = async () => { const allPostsData = getSortedPostsData() return { props: { allPostsData } } } 여기에 const allPostsData가 선언되긴 했지만 const는 블록레벨 스코프라서 getStaticProps안에서만 유효한 변수 아닌가요?? 그리고 return 을 그냥 하는게 아니라 props : { ...} 로 하는 이유도 궁금합니다!!

John Ahn · Answer

안녕하세요! 현재 저희가 Nextjs를 사용하고 있습니다. 블록 레벨 스코프이지만 Nextjs 내부에서 서버를 시작할 때 NextJS 가 알아서 getStaticProps 안에서 로직 처리 후 props를 컴포넌트에 보내주는 것입니다. return 해서 props로 보내는 이유도 코딩은 결국 언어이기 때문입니다. 다른 말로 하면 약속이기도 합니다. 누군가 return 후 props로 보내야 된다고 약속해놨기 때문에 저희는 return 안에 props로 보내주는 것입니다. 그 약속해놓은 방식은 그 해당 라이브러리나 프레임워크에 설명서에서 보실 수 있습니다. 감사합니다!! https://nextjs.org/docs/basic-features/data-fetching/get-static-props