[ Next.js 공부하기 ] 05. Style.JSX 전역 설정

[ 이전 공부 내용 ]

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 )

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 03. pages 와 static pre rendering

2022.02.15 - [web/React.js] - [ Next.js 공부하기 ] 04. Routing / CSS Module / Style JSX

---

Style.jsx를 하다보면, 그럼 전역으로 어떤 특정 태그의 스타일을 바꾸고 싶은데

어떻게 해 그럼? 이라고 생각한 사람도 있을 것이다. 분명히!

 

그걸 전역으로 만들기 위해서는 방법이 있다.

 

Typescript를 사용하는 사람이라면, pages에, _app.tsx 파일이 있었을 것이고, javascript는 없을수도 있다.

그 땐, _app.js 파일을 만들어주자. 뒤에 _를 꼭 붙여야 한다. 이건, 프레임워크이기 때문에, 커스터마이징을 하기 위해서는 규칙을 따라야만 한다.

 

그리고, 다음과 같이 코드를 작성해주자. Typescript는, 이미 작성이 되어 있기 때문에, javascript 개발자만 작성하자.

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

 

MyApp 함수는, Component, 즉 각각의 페이지로 만든 함수를 받아와서, 렌더링해주는 역할을 한다고 생각하면 된다.

React.js에서, App.js 또는 App.tsx 파일과 같다고 보면 된다.

공통적인 Header나 Footer 같은 경우, 저 Component 태그 위 아래에 붙여서 사용하면 된다. 

굳이 각각 컴포넌트에, Header와 Footer를 넣어 줄 필요가 없다는 것이다.

 

그리고 Style.JSX를 전역으로 사용하려면 다음과 같이 사용하면 된다.

export default function MyApp({Component, pageProps}){
	return (
    <>
      <Component {...pageProps} />
      <style jsx global>
        {`
          span {
            color: blue;
          }
        `}
      </style>
    </>
  );
}

style jsx global 을 붙여줘야 한다. global을 붙여줘야만 전역으로 사용한다고 선언한 것이다. style jsx라고 한다면, 되지 않는다는 점 주의하자!

 

물론 typescript는, global.css가 있으니, global.css 안에 넣어서 전역으로 스타일을 지정해줘도 상관없는 점도 알아두자!

편한 방법으로 사용하면 될 것 같다ㅎㅎㅎ