custom app(_app.js)

// _app.js


// '_'로 시작하는 파일은 렌더링 되기 전에 가장 먼저 확인하고 원하는 페이지 렌더링 함 => custom app

import NavBar from "../components/NavBar";
// custom app을 제외한 모든 페이지는 module.css외에 css를 import 할 수 없음
// custom app은 css파일 import 가능
import '../styles/globals.css'

// props 양식은 {Component, pageProps} 형식을 따라야함
export default function App({Component, pageProps}) {
  return (
  <div>
    {/* 모든 Component에 NavBar 추가됨 */}
    {/* 페이지마다 <NavBar /> 한 것 지워도 됨 */}
    <NavBar />
    <Component {...pageProps} />
    {/* go라는 문구가 모든 페이지에 적용 */}
    <span>go</span>
    {/* _app.js 에서 global해주면 전체에 적용 */}
    <style jsx global>
      {`
        a {
          color: white;
        }
      `}
    </style>
  </div>
  )
}

• 페이지가 렌더링 되기 전에 custom app을 먼저 확인 후 렌더링
• App({Component, pageProps}) <Component {...pageProps} />는 정해진 양식
• Component는 모든 컴포넌트를 지칭. 따라서 _app.js파일에 내용을 적용(위 코드에서 'NavBar'는 위에 'go'는 모든 페이지 컴포넌트 밑에 출력)
• 다른 페이지에서는 module.css 외에는 css import 불가하지만 _app.js에서는 import globals.css 가능
• style jsx global 형식으로 해당되는 모든 컴포넌트에 global style 적용