NextJS (7) _app

만약 모든 페이지에 똑같은 작업을 하고 싶다면 _app 파일에 대해 알아야 한다

_app 파일은 다른 파일들을 렌더링 하기 전에 _app파일을 제일 먼저 렌더링을 한다

 

그럼 바로 예시를 봐보자

 

예)

 

 

우선 pages folder안에 파일들을 만들어주고

이렇게 _app 파일을 만들어줬다

_app파일은 Component와 pageProps props들을 받는데

 

Component prop은 프로그램 실행을 할 때 Component props에서 모든 component들을 하나씩 불러와 작업을 한다

 

예)

예를 들어 프로그램을 실행시키면 _app 파일은 Index component를 불러와 작업을 한다는 뜻

이후 Info component도 불러와 작업시킨다

 

pageProps는 단순히 각 component에 있는 props들을 불러온다는 뜻이다

 

이후 line 5와 같이 각 component한테 같은 작업을 시킨다 

이렇게 코드를 짜고 실행시키면

 

잘 나오는 걸 볼 수 있다