[TIL] 노마드코더 nextJS - 1

라이브러리와 프레임워크 차이

라이브러리 (react)

- 내가 라이브러리를 불러와서 내가 라이브러리를 사용해서 뭔가를 하는 것

- 내가 원하는 대로 코드 작성, 사용하고 싶을 때 사용할 수 있다

 

프레임워크 (next js)

- 나의 코드를 불러오는 것

- 적절한 위치에 코드를 잘 적기만 하면 내 코드를 불러와서 모든 걸 동작시켜 준다

 

// 나중에 더 자세하게 차이 비교해보기

 

리액트는 index.js 에 ReactDOM.render() ~~~이런게 적혀있지만

App 컴포넌트 부터는 내 맘대로 작성한다.

폴더구조를 어떻게 할지, 언제 react를 부를 지

폴더이름도 내 자유, 자유도가 굉장히 높음

 

넥스트는 이미 다 정해져 있음 규칙이 정해져 있고

그 규칙을 따라야 잘 동작한다

render 같은 것을 우리가 직접 건들 수 없음

내가 위치에 맞게 코드를 잘 넣어야 한다

pages 폴더에 파일을 만들어 넣으면 /파일명 주소로 자동으로 라우팅 시켜준다!

 

---

 

파일명은 그대로 url이 되지만 컴포넌트 명은 전혀 상관없음!

nextjs는 저절로 404페이지를 만들어줌 > 커스텀도 가능

 

홈은 index.js

 

그냥 js 파일에서도

jsx를 사용할 수 있고, react를 import 할 필요가 없음!! 와우

 

---

 

static pre rendering

next js의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것!!

> 정적(static)으로 생성됨

csr - 브라우저가 유저가 보는 ui를 만드는 모든 것을 한다

유저에게 보이는 html에 들어있지 않음

브라우저가 js를 읽어와서 ui를 그려줌

 

nextjs는 미리 렌더링되어서 csr처럼 흰화면만 보여지지 않음

초기 상태로 pre-rendering 함

 

---

 

<a>태그는 전체 페이지를 새로 렌더링 하기 때문에 권장하지 않음

react router의 링크처럼 nextjs도 링크를 지원한다

Link에 href='' 하면 됨

className이나 style은 <Link> 태그에 줄 수 없고 그 안의 자식한테 줘야함

ex) <Link class='hi' href='/hi'><a>Hi!

가 아니라

<Link href='/hi'><a class='hi'> 이렇게

 

useRouter()

이미 설치되어 있고 location?에 대한 정보를 볼 수 있음!

let router = useRouter()

router에 hook을 건 것!

 

---

 

css 넣는 법

module.css에 넣기

3번 줄처럼 module.css를 불러옴

하지만 8번줄처럼 class 나 className 으로 주진 않을거

왜냐면! 모듈module 이니까..!

이렇게 하면 동작

module.css 이 패턴은 css 모듈이라고 하는데

이 패턴을 지키면 우리가 css를 쓸 수 있음!!

 

className을 그냥 텍스트로 적지 않음 

js 오브젝트에서의 프로퍼티 형식으로 적음

실제로 브라우저에서 돌아갈 때 클래스명을 봐보면 이렇게 되어있다..!

NavBar 안에 css에서 만든 .nav도 붙이고 뒤에는 무작위 이름!!

이걸 자동으로 만들어줌

> 다른 파일이나 다른 태그에서도 똑같은 module.css안에 .nav를 그대로 쓸 수 있는거!

 

액티브 클래스를 만들어서 이렇게 하면

홈일 때는 10번 줄 a태그가 active가 가진 스타일을 적용하고(module.css에서 미리 지정해준)

about일 때는(pathname === '/about') 13번 줄의 a태그가 스타일을 가짐!

 

클래스를 두 개 사용하려면 

`${}`  이렇게 해서 두 개를 모두 사용하거나

[].join(' ') 이렇게 배열로 해서 사용할 수 있음!

 

모듈로 하려면 파일을 바꿔야 하고 파일 두 개나 있어야 하고

클래스 명도 기억해야 되고 조건을 넣을 때도 복잡함!!

다른 css 방법!!!

 

---

 

styled jsx!

next JS의 고유 방법이라고 할 수 있음

<style jsx>{₩₩}</style>

html의 기본 style태그에 jsx 프롭을 줌!

그 안에 중괄호+백틱

 

이렇게 적어주고 브라우저에서 보면 적용이 잘돼있음

클래스명은 더 기괴해졌다

분리되어있으면서도 파일을 새로 만들 필요도 없고 부모요소랑 중복되지도 않음

active도 잘 됨!!

딱 해당 컴포넌트 안에서만 스타일이 적용이 된다.

이렇게 되어있기 때문에 겹칠 일도 없음!

 

color를 props로 받아오고 싶으면 

그냥 이렇게 쓰면 됨!

 

---

 

전역으로 스타일 지정하는 법

global style

중요한 nextjs의 컨셉을 알아야 됨

App Component와 App Page!!!

 

<style jsx global>

이렇게 global만 추가해주면 됨!

만약 a태그 색을 white로 주고 active 일 때만 tomato다?

이렇게 잘 적용 됨

하지만 흥미로운 점은 home에는 적용이 안됨

next를 사용할 때는 page를 생각해야 됨!!

 

_app.js 

렌더링 할 때 이 언더바 앱 제이에스를 먼저 봄!

그래서 글로벌로 적용하고 싶은 경우(스타일이나 nav같은 것)

 

next js 규칙

Component와 pageProps를 넘겨준다

여기에 적은 것은 모든 페이지에서 다 보임!

 

nav 같은 경우도 이렇게 해주면 됨! 모든 페이지에 다 보임

style도 여기에 넣어주면 다 적용 됨

_app.js에는 global.css 파일을 만들어서 import 할 수도 있음

다른 컴포넌트 들에는 global.css를 임포트 하려면 에러를 뱉음 module.css로 해야함

하지만 _app.js에는 global.css를 import해서 전역으로 쓸 수 있다!

 

 

---

1강 끄으트틑...