[Next] 스타일 적용과 _App

Next에 스타일 적용

컴포넌트의 태그 안에 스타일을 직접 추가할수도있다. 하지만 인라인 스타일로 적용하는 것은 코드의 가독성 뿐만 아니라 효율적으로 관리할수 없다.

태그 안에 직접 적용

import styles from './NavBar.module.css';

컴포넌트와 동일한 경로에 XXXX.module.css 파일을 생성하고 그 안에 일반적인 CSS를 작성하는 방법과 동일하게 작성한다.

그리고 적용 할 컴포넌트 안에서 해당 CSS를 styles로 불러와 클래스네임에 객체스타일로 원하는 클래스를 넣으면 브라우저에서는 랜덤의 이름으로 클래스를 부여하여 충돌할 걱정이 없다.

여러개의 클래스를 추가하는 방법은 다양하다.

import Link from 'next/link';
import { useRouter } from 'next/router';
export default function NavBar() {
  const router = useRouter();
  return (
    <nav className={styles.nav}>
      {/* 1. `${}`안에 스타일링 넣어주기 */}
      <Link href='/' className={`${styles.link} ${router.pathname === '/' ? StyleSheet.active : ''}`}>
        Home
      </Link>

      {/* 2. []배열 안에 스타일 코드를 넣어준 뒤 join()함수로 결합 */}
      <Link href='/about' className={[styles.link, router.pathname === '/about' ? StyleSheet.active : ''].join(' ')}>
        About
      </Link>
    </nav>
  );
}

백틱과달러사인을 이용해 변수로 넣을 수도 있고, 배열로 넣어 join 함수를 이용해 결합시킬수도있다.

styled jsx로 적용

import Link from 'next/link';

export default function NavBar() {
  return (
    <nav>
      <Link href='/'>Home</Link>
      <Link href='/about'>About</Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
      `}</style>
    </nav>
  );
}

일반 html처럼 style태그를 열어주는데 속성에 jsx 를 추가하고 내용에 중괄호 를 열고 CSS를 작성하면 해당 컴포넌트에 작성한 스타일이 적용된다.

import Link from 'next/link';

export default function NavBar() {
  return (
    <nav>
      <h1 className='active'>hello</h1>
      <style jsx>{`
        nav {
          background-color: gray;
        }
      `}</style>
    </nav>
  );
}

하지만 index컴포넌트에서는 NavBar컴포넌트에서 작성한 스타일이 적용이 되지 않는다.

이때 index컴포넌트에서 전역적으로 스타일 을 작성하면 된다.

전역적으로 스타일을 적용하는 법은 간단하다.

jsx 속성 뒤에 추가로 global 속성만 추가 해주면 된다.

<style jsx global>{`
  nav {
    background-color: gray;
  }
`}</style>;

index컴포넌트에 전역적으로 스타일을 적용했지만 다른 컴포넌트의 경우 페이지가 독립적으로 존재하기 때문에 전역 스타일이 적용되지 않는다.

---

Custom App Component

서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 한다.

전역적으로 적용되는 컴포넌트를 Customizing 하기위해서 pages폴더 안에 _app.js 파일을 생성한다. (언더스코어 _ 중요)

Next로 _app.js 내의 App함수 호출을 하면서 렌더링 할 특정컴포넌트를 첫번째 prop으로 넣어준다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

모든 컴포넌트에 공통으로 적용할 속성 관리를 목적으로 한다.

import NavBar from '../components/NavBar';

export default function App({ Component, pageProps }) {
  return (
    <div>
      {/* 모든 페이지에 NavBar컴포넌트가 렌더링 됨 */}
      <NavBar />
      {/* 모든 페이지에 NavBar라는 컴포넌트를 적용할 수 있도록 함 */}
      <Component {...pageProps} />
      {/* 모든 페이지에 전역적인 스타일 적용이 가능함 */}
      <style jsx global>{`
        a {
          color: blue;
        }
      `}</style>
    </div>
  );
}

Component라는 prop을 받아 호출해주면 레이아웃 구성이 가능하고, 전역적으로 스타일도 적용 시킬 수 있다.

규칙

• Component 속성값은 서버에 요청한 페이지가 된다.
  예) http://localhost:3000/home 에 접속하면 Component는 home 컴포넌트를 가리킨다.
• pageProps는 getInitialProps getStaticProps getServerSideProps 중 하나를 통해 Fetching한 초기 속성값이 된다.
• _app 에서도 getInitialProps 를 사용해 모든 페이지에서 사용할 공통 속성값을 지정할 수 있으나 이럴 경우에는 자동 정적 최적화(Automatic Static Optimization)가 비활성화되어 모든 페이지가 SSR을 통해 제공된다.
• 만약 _app 에서 getInitialProps 를 사용하고자 하면 반드시 아래처럼 App 객체를 불러온 후 getInitialProps 를 통해 데이터를 불러와야 한다.

import App from 'next/app';

function app({ Component, pageProps }) {
  return <Comoenent {...pageProps} />;
}

app.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};