[2019.08.23] 오늘의 TIL - [Next.js] global Style의 이해

next.js에서 여러 페이지 및 컴포넌트에 global 방식으로 스타일을 적용할 수 있다.

아래 예시를 봐보자.

components/nav.js

import React from 'react'

const Nav = () => (
  <div>
    <a>첫번째 컴포넌트 입니다.</a>
  </div>
)

export default Nav;

a 태그 하나가 들어있는 간단한 컴포넌트이다.

pages/index.js

import React from 'react'
import Nav from '../components/nav'

const Home = () => (
  <div>
    <a>index 페에지 입니다.</a>
    <Nav />

    <style jsx>{`
     a {
        color: #067df7;
        text-decoration: none;
        font-size: 13px;
        text-align: center;
        margin: 10px 0;
      }
    `}</style>
  </div>
)

export default Home;

index.js 페이지에서도 a 태그를 가지고 있다.

그리고 바로 a태그 바로 밑에 nav 컴포넌트를 가져와서 사용하였다.

nav 컴포넌트 하단에는 a태그에 스타일을 적용하고 있다.

 

결과 화면

 

결과를 확인해보니, index.js 페이지 파일에 있는 a 태그 요소에만 적용이 되었다.

만약 하위 컴포넌트에도 해당 스타일을 적용하려면 style을 global로 선언해주어야 한다.

# global style 선언 방식

<style jsx global>

</style>

 

index.js 페이지 파일을 수정해보자.

import React from 'react'
import Nav from '../components/nav'

const Home = () => (
  <div>
    <a>index 페에지 입니다.</a>
    <Nav />

    <style jsx global>{`
     a {
        color: #067df7;
        text-decoration: none;
        font-size: 13px;
        text-align: center;
        margin: 10px 0;
      }
    `}</style>
  </div>
)

export default Home;

 

결과 화면

 

최상위 index.js 페이지에서 선언한 style이 하위 컴포넌트에도 적용된 것을 확인할 수 있다.

 

최하위 컴포넌트로 사용할 nav2.js 파일을 하나 더 생성해보자.

components/nav2.js

import React from 'react';

const nav2 = () => (
  <div>
    <a href='/'>최하위 컴포넌트 입니다.</a>
  </div>
)
export default nav2;

똑같이 a태그를 사용한 컴포넌트이다.

components/nav.js

import React from 'react'
import Nav2 from './nav2';


const Nav = () => (
  <div>
    <a>첫번째 컴포넌트 입니다.</a>
    <Nav2 />
  </div>
)

export default Nav

최하위 컴포넌트 nav2.js 파일을 가져와서 사용한다.

결과 화면

최상위 페이지 index.js 파일에 선언한 style이 nav, nav2 컴포넌트에 전부 적용된 것을 확인할 수 있다.

 

'<style jsx global>' 태그를 최상위 페이지가 아닌, 중간 컴포넌트에서 선언하면?

 

최상위 페이지 index.js에 선언한 global style을 삭제하고, 중간 컴포넌트인 nav.js 파일에 선언해보자.

pages/index.js

import React from 'react'
import Nav from '../components/nav'

const Home = () => (
  <div>
    <a href='/'>index 페이지 입니다.</a>
    <Nav />
  </div>
)

export default Home

index.js페이지에서 선언하던 global style을, 하위인 nav컴포넌트로 이동시킨다.

components/nav.js

import React from 'react'
import Nav2 from './nav2';


const Nav = () => (
  <div>
    <a>첫번째 컴포넌트 입니다.</a>
    <Nav2 />
    <style jsx global>{`
      a {
        color: #067df7;
        text-decoration: none;
        font-size: 13px;
        text-align: center;
        margin: 10px 0;
      }
    `}</style>
  </div>
)

export default Nav

 

결과화면

중간 컴포넌트인 nav컴포넌트에 선언을 하니, 상위 하위 구분 없이 전부 적용되는 것을 확인할 수 있다.

 

이러한 특징을 이용해서, 우리는 index.js라는 특정 페이지뿐 아니라, 모든 페이지에도 global하게 적용할 수 있다.

components/Layout.js

import React from 'react'
import Header from './Header';
import Title from './Title';

const Layout = ({children}) => (
  <div>
    <Header />
    {children}
    <style jsx global>{`
      ...
    `}</style>
  </div>
)

export default Layout;

 

바로 next.js 에서 흔히 사용하는 Layout 컴포넌트에 직접 global style을 적용하는 것이다.

그러면 모든 페이지는 Layout을 이용하므로, 모든 페이지 및 컴포넌트에 style을 적용시킬 수 있다.

---

스타일만 선언한 외부 파일을 가져와서 쓰는 방식도 있는데, 이건 다음에 기회 되면 작성해야겠다..!