Next.js
-
layout패턴Next.js 2022. 7. 22. 22:17
보통 component파일에 layout.js를 만들어서 다음과 같은 패턴을 사용한다. //(_app.js) import Layout from "../components/Layout"; export default function App({Component, pageProps}) { return ( ); } //(Layout.js) import NavBar from "./NavBar"; export default function Layout({children}) { return ( {children} ); } layout.js의 children prop가 _app.js의 가 되는 것이다. 즉, 안에 들어가는게 모두 {children}에 나오게 되는 것이다. 그리고 Head라는걸 import해서 사용할 수 ..
-
custom appNext.js 2022. 7. 22. 20:32
전처럼 하나의 컴포넌트가 아닌 전역적인 css를 주고싶다면, Next.js가 모든 페이지를 렌더링할 수 있게 하는 _app.js라는 무조건 이 이름을 가진 파일을 만들어서 customize할 수 있다. 즉, _app.js는 청사진이 된다. 이걸 기반으로 pages에 있는 다른 js 파일들을 살펴본다. export default function App({Component, pageProps}) { return ( ); } 이렇게 적으면, Component자리에 렌더링하길 원하는 페에지를 넣을 거고, 페이지를 렌더링하게 된다. 그래서 index.js about.js에 있는 을 _app.js에 적어놓으면 각각 컴포넌트에 사용할 일이 없게 된다. 그리고, 여기에 style을 적으면 모든 컴포넌트에 적용이 된다...
-
Styles JSXNext.js 2022. 7. 22. 19:19
전의 css module은 조건에 대한 css스타일을 주기 불편하고, 클래스이름을 외워야 하지만, styled jsx는 그렇지 않다. return Home About 이런 식으로, style태그 안에 jsx를 적고, {``}안에 내용을 적어주면 된다. 하지만, 한 파일에 있는 요소만 영향을 줄 뿐 다른 파일의 a태그엔 영향을 주지 않는다. 클래스 역시 이렇게 넣어주고, .클래스이름 {}하면 된다. className={router.pathname ==="/about" ? "active": "" }About 그리곤, 클래스도 한 컴포넌트 내부로 범위가 한정되므로 클래스이름이 같아도 상관없다.
-
CSS ModulesNext.js 2022. 7. 22. 18:19
components파일에 작명.module.css 파일을 만들고, css를 작성한 다음 .nav { display: flex; justify-content: space-between; background-color: tomato; } import Link from 'next/link'; import {useRouter} from 'next/router'; import styles from './NavBar.module.css'; export default function NavBar() { const router = useRouter(); return Home About } 이렇게 import styles from 경로 로 import를 해주면 className에 오브젝트에서 프로퍼티 형식으로 적어주면 ..
-
RoutingNext.js 2022. 7. 22. 17:51
루트에 컴포넌트(component)파일을 만들고, 그 안에 NavBar.js를 만들어서 export default function NavBar() { return Home About } 이런 식으로, 코드를 짜면, a태그를 사용하지 말라고 문제가 생긴다. 이유는 a태그를 통해 이동하면 새로고침이 되기 때문이다. 그래서 import Link from 'next/link' export default function NavBar() { return Home About } 이런 식으로 Link를 import해와서 Link태그로 a태그를 감싸고 href를 Link태그에 써주면 된다. 이 Link태그는 오로지 href를 위한 것이고, style나 className은 a태그에 넣어주면 된다. import Link f..
-
pre renderingNext.js 2022. 7. 22. 17:20
NextJS의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것이라고 한다. 이것들이 정적(static)으로 생성된다고하는데, 뭔지 알아보자. 먼저 create react app 은 client side render을 하는 앱을 만드는데, csr이란 내 브라우저가 user가 보는 UI를 만드는 모든 것을 한다는 것을 의미한다. 즉, 브라우저가 react.js를 다운받고, 코드를 다운받고, 거기에 js만 동작하면서 데이터를 주고 받아서 렌더링을 진행한다. 정리해보면, 브라우저가 html을 가져올 때, 빈div로 가져오고, 거기에 js가 동작해서 브라우저를 채운다.! 즉 , js가 꺼져있으면 웹이 뜨지 않고, js가 켜져 있을 때, 초기에 모든걸 다 불러오기에 첫 구동속도가 느릴 수 있..
-
pagesNext.js 2022. 7. 22. 16:40
nextJS에선 pages에 있는 파일의 이름을 가져다가 url의 이름으로 사용한다. 그래서 about.js라는 파일을 만들고 그 안에, export default Potato() { return () } 이런 식으로 Potato라는 컴포넌트이름을 지어도 그닥 중요하지 않다. 우리에게 중요한 건 파일이름이다. 몇 가지 예외상황으론, index.js가 /index가 아닌 기본 페이지 즉, 앱의 홈이라는 것이다. 그리곤, 컴포넌트에선 리액트를 import해오지 않아도 JSX를 사용할 수 있다. 하지만, state이런걸 사용할 땐 import해야한다.
-
라이브러리와 프레임워크Next.js 2022. 7. 22. 16:26
먼저, 프레임워크와 라이브러리의 차이를 보면, 프레임워크는 내가 코드를 적절하게 적기만하면, 프레임워크가 자동으로 내 코드를 보여주지만, 라이브러리는 내가 원하는대로 코드를 작성할 수 있고, 사용하고 싶을 때 사용할 수 있다. Next.js는 프레임워크라 규칙을 따라야한다. 그래서 라우팅없이, pages폴더안에 있는 index.js가 메인페이지가 되며, about.js를 만들면 url 에 메인주소/about에 about.js가 나오게 된다. 즉, 라이브러린 내가 모든 결정을 내리지만, 프레임워크를 사용할 땐, 파일 이름과 구조 등 정해진 규칙을 따라 만들어야한다.