[ Next.js 공부하기 ] 04. Routing / CSS Module / 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

---

1. Routing

- Next.js에서는, react.js 처럼, react-router-dom을 설치하거나 하는 것을 할 필요가 없다.

굉장히 좋다^^

 

components 폴더에, navbar.tsx 파일을 생성해주고

 

아래와 같이 코드를 작성하자.

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        <a>HOME</a>
      </Link>
      <Link href="/test">
        <a>TEST</a>
      </Link>
    </nav>
  );
}

<Link> 태그를 만들고, href 속성으로 경로를 설정해주고, 그 안에 <a> 태그로 감싸주면 된다.

<a> 태그로 경로 설정을 해줘도 되지만 굉장히 느리면서도 next.js에서도 원하지 않는 방법이기도 하다.

 

또한 const router로 useRouter 라는 next.js에서 제공해주는 함수를 대입해서 console.log를 찍어보면,

여러가지의 값이 나오는데, 현재 경로가 어떻게 되는 지를 알려주기도, 뒤로 갈때의 경로가 무엇인 지도 알려준다.

너무 좋은 것을 제공해주는 것 같다.

 

[ 중요! ]

어떻게 보면, 귀찮을 수도 있다. 왜 <a> 태그를 감싸줘야 하나? 하지만, <Link>는 그저 경로만 변경해주는 역할을 해줄 뿐이고,

html의 역할을 해주는 것이 아니기 때문에, className을 가질수도, style 속성을 가지지도 않기 때문에,

css를 사용해서 꾸며주기 위해서는 안에 <a> 또는 다른 태그로 감싸줘야만 한다는 것을 잊지 말자!

 

---

 

2. CSS Module

- Next.js에서는 [이름].module.css 파일을 만들 수 있다. 난 scss를 사용하는 것이 더 편하기 때문에,

npm i sass 라는 명령어를 이용해서, 설치한 뒤 navbar.module.scss 라는 파일을 만들었다.

css 모듈과 css의 차이점은, className을 이용해서 css를 참조해서 꾸며주는 것은 똑같다.

그렇지만 사용 방법이 다르다는 것이다.

 

import styles from "./navbar.module.scss";

이런식으로 import를 해서, styles라는 이름으로, navbar.module.scss를 참조할 수 있도록 했다.

또한 css or scss 파일이 이런식으로 되어있다고 생각을 해보자.

[navbar.module.scss]

.testdev{
	display: flex;
  	justify-content: space-between;
}

 

일반적으로, css를 참조하는 방법은 다음과 같을 것이다.

<div className="testdev">안녕하세요.</div>

 

하지만, module.css는 다음과 같이 사용이 가능하다.

<div className={styles.testdev}>안녕하세요.</div>

 

module.css는, 우리가 알던 방식으로 문자열로 참조를 하게 된다면, 사용할 수가 없다는 점이다.

styles.testdev 처럼, styles를 참조해서 사용해야한다는 점 주의!

 

이렇게 사용이 가능한 이유는, css를 사용하다보면, 다른 css파일임에도 같은 클래스네임을 만들게 되면

중복이 되서 헷갈리는 경우가 생기게 된다.

 

이걸 알고 있는 Next.js 개발사에서, 중복이 되는 점을 피하게끔 만든 것이 module.css 라고 볼 수 있다.

module.css를 사용해서 className에 붙여주고 개발자모드를 살펴보게 되면

className이, testdev가 아닌, "navbar_testdev_ef6dlf" 뭐 이런 식으로, 무작위로 만들어준다.

그렇기 때문에 다른 module.css 파일이라면? 같은 클래스네임이여도 무작위의 클래스네임으로 배치하기 때문에 중복되지 않게 된다.

 

여기서 궁금한 점.. css를 사용할 때, 2개 이상의 클래스네임을 가지게 되는 태그를 만들고 싶으면 어떻게 해요?! 라는 것을 궁금해하는 사람도 있을 수 있다. 나 또한 공부를 하면서 음.. 어떻게 하면 할 수 있지? 라는 생각을 했다.

방법은 2가지가 있다.

 

[navbar.module.scss]

.one{
	color: blue;
}

.two{
	font-size: 20px;
}

뭐 솔직히 이렇게 만들일은 없지만, 2개의 클래스를 만들어서

2개의 클래스를 사용하는 태그는 색깔이 파란색이면서 20px의 사이즈를 가진 글씨를 표현하고 싶다 

 

[ 방법 1 ]

- 벡틱(` `)을 사용한다. 

<div className={`${styles.one} ${styles.two}`}>
저는 2개의 클래스 네임을 사용하고 있습니다.
</div>

 

[ 방법 2 ]

- 배열을 이용한다, 주의할 점은 배열을 사용하면, join이란 함수를 기본으로 사용할 수 있는데, 빈 문자열이 아닌, 공백을 표현해줘야 한다.

react나, html에서도, 2개를 사용할 때, <div class="one two"></div> 이런 형태로 사용하듯이, 공백을 줘서 띄어쓰기를 하듯이 문자열을 표현해줘야만 사용이 가능하다는 점 주의하자!

<div className={[styles.one, styles.two].join(" ")}>
저는 2개의 클래스 네임을 가지고 있습니다.
</div>

 

next.js에서는 이런 방식도 있다는 점을 이해하고만 넘어가자!ㅎㅎㅎ

다른 방식이 또 있다.

 

---

3. Style.JSX

- 음.. 사용해본 적은 없지만, style.jsx는 html 태그에서, <style> 태그안에, css 코드를 적듯이, 사용하는 방식이라고 보면 될 것 같다.

style.jsx의 장점은, input 또는 div, a와 같은 html의 고유 태그를 사용해도, 중복이 되지 않고 각각의 style.jsx를 사용하는 부분만 적용이 된다는 점이다.

 

만약 vs code를 사용하는 개발자라면, Extension을 설치하는 것이 좋은데, next.js라는 Extension을 설치한다면, style.jsx에 자동완성이 가능해진다는 점 참고하자!

 

사용방법은 다음과 같다.

export default function Test() {
  const router = useRouter();
  return (
  <div>
  	<span>안녕하세요.</span>
      <style jsx>{`
        span {
          color: blue;
        }
      `}</style>
  );
  </div>
}

next.js에서는 <style> 태그 안에, jsx 속성을 붙여주면 사용이 가능해진다.

또한 <style jsx> 태그 안에, 작은 따옴표가 아니라, 벡틱(₩키)이다.

 

다시 한 번 말하지만, style.jsx는, 오직 사용한 컴포넌트에서만 사용이 가능하기 때문에, 다른 곳에서, span이란 태그에도 글씨 색깔이 파란색으로 적용되는 일은 없다. 오로지 해당 Test라는 컴포넌트에서만 사용이 가능하다는 점을 알아둬야한다.