1. module.css
.module.css 확장자로 파일을 생성한다
해당 파일에서 원하는 클래스이름으로 스타일을 지정하고
JS 파일에서 사용하기 위해 import 해준다
클래스이름으로 적용할 경우에는 텍스트 형식으로 작성하지 않고
자바스크립트 오브젝트에서의 프로퍼티 형식으로 작성해준다
해당 클래스이름은 내가 지정한 이름으로 되는 것이 아니라 무작위로 생성이 된다
그렇기 때문에 충돌, 중복 방지에 뛰어나고
다른 컴포넌트에서도 nav라는 클래스이름을 마음껏 사용할 수 있다
지난 포스팅에서 해당 태그에 스타일을 지정했었는데
이것을 css module로 변경해보자
active 클래스를 만들어 원하는 속성을 지정
<Link>태그에 style대신 클래스이름 설정 (삼항연산자 활용)
해당 탭의 주소로 변경될때마다 스타일이 잘 적용된다!
2개 이상의 클래스이름을 지정하는 경우
2개 이상의 클래스이름은 다음과 같은 방법으로 적용할 수 있다
우선 link 클래스 스타일을 하나 더 추가해주었다
여기서! 두가지 방식으로 작성이 가능하다
방법1 : 템플릿 리터럴 활용
방법2 : 배열 형태로 작성 → join(' ') 으로 합치기
Home 활성화 되었을 때
Counter 활성화 되었을 때
2. Styled JSX
Styled JSX는 Next.js의 고유방법이라고 할 수 있다
스타일 적용 범위를 오직 해당 컴포넌트 내부로 한정한다
때문에, 같은 클래스이름을 다른 파일에서 사용하더라도 적용되지 않는다
오로지 해당 컴포넌트에서만 사용이 가능하다
Styled JSX 사용하기
STEP1. Styled JSX를 적용해보자
먼저 Styled JSX를 사용하기 위해 다시 셋팅해준다
🔊 참고
<Link> 태그에legacyBehavior를 넣어주면
<a> 태그 사용이 가능하고 스타일을 적용할 수 있다
https://nextjs.org/docs/api-reference/next/link
<style>태그를 작성하고 jsx를 입력해준다
중괄호 내부에 백틱을 작성해주면 준비 끝!
CSS 파일에 작성하듯이 스타일을 작성해주면
아주 잘 적용이 된다
Styled JSX도 클래스이름이 무작위로 생성되는 것을 확인할 수 있다
STEP2. 해당탭이 활성화 되었을 때 스타일을 변경해보자
위에서 이미 다뤘던 것처럼 pathname에 따라 클래스이름을 지정해준다
active 클래스에 스타일을 지정해준다
변경되는 것 확인
🔊 참고
Styled JSX 에서 Prettier를 사용하고 싶다면
vscode-styled-components 익스텐션 설치!
3. 전역 스타일
지금까지 알아본 방식으로는 해당 컴포넌트에만 스타일 지정이 가능하다
전역적으로 스타일을 적용하려면 어떻게 해야할까?
먼저 App Component에 대해 알아야한다
App Component란
Next.js가 모든 페이지를 렌더링할 수 있게 하는 일종의 컴포넌트로 Next.js프레임워크 내에 포함되어 있다
하지만 이 App Component를 커스터마이징 하려면 _app.js 파일을 생성해야한다
Next.js는 렌더링이 되기 전에 가장 먼저 _app.js 파일을 열어본 후 각각의 컴포넌트를 렌더링하게 된다
( ↳ 리액트와 비슷한 방식이라고 생각이 드는데 아닐수도.. )
이 _app.js 파일에 스타일을 지정해주면 전역적으로 스타일이 지정되는 것이다!
전역 스타일 지정하기
1. 기본 설정
pages 폴더 내에 _app.js 파일을 생성한다
_app.js에서 원하는 이름으로 함수를 생성한다
매개변수로 Component와 pageProps 를 받아오는데 이것은 프레임워크가 지정해둔 형식이다
그리고 <Component {...pageProps}> 형태로 return 해준다
이해를 돕기위해 별도의 코드도 작성해보았다
기존의 index.js와 counter.js가 잘 나타나고
_app.js 에서 작성한 코드 또한 잘 나타난다
Next.js가 각각의 페이지를 렌더링 하려고 할 때
각각의 컴포넌트를 가져다가 prop으로서_app.js파일내의 함수에 전달해준다
그렇게 전달받은 컴포넌트와 props를 통해 페이지를 렌더링 하는 것이다
2. 중복 작성된 <NavBar/> 수정하기
기존에는 각각의 파일에 <NavBar/>를 렌더링 해줬는데
_app.js파일에서 <NavBar/>를 한번만 작성해주면 모든 페이지에 렌더링이 된다
각각의 파일에서 import하고 불러오는 과정 없이도 <NavBar/>가 잘 나타난다
3. 전역 스타일
그럼 이제 진짜로 global style을 지정해보자
이미 위에서 배운 Styled JSX 방식을 _app.js파일에 그대로 적용해주면 된다
단❗ <style> 태그에 global 키워드를 함께 작성해주기!
역시 잘 적용되는 것 확인
4. CSS 파일 import하기
별도의 CSS파일은 오로지 _app.js에서만 import가 가능하다
다른 파일에서 사용하고 싶다면 모듈형태로 변경해야한다
styles 폴더에 있는 globals.css를 import 해보자
아주 간단하다
_app.js에서 원하는 CSS 파일의 경로를 작성해주면 끝!
스타일 변경된 것 확인!
