기본 설정, prop-types, Link, eslint

기본 설정

강좌에서 Next는 9버전을 사용했다. Next는 import React from 'react'가 있어도 없어도 상관없다.

 

넥스트는 pages 안에 있는 파일들을 인식해서 코드 스플리팅 된 개별적인 페이지로 만들어준다. 따라서 pages의 이름은 무조건 pages이어야 한다.

 

-package.json

  "scripts": {
    "dev": "next"
  },

dev에 next를 넣어주면 npm run dev를 했을 때 next가 실행된다.

페이지 추가하기

-회원가입 페이지

const Signup = () => {
    return <div>회원가입 페이지</div>
};

export default Signup;

만약 회원가입 페이지를 만들고 싶으면 그냥 이렇게 만들면된다. 그리고 url에 /singup을 붙이면 회원가입 페이지로 이동한다.

=> 결국 주소대로 컴포넌트와 1대1로 매핑을 해줬다.

 

-다른 경로 지정하기

const ohyun = () => {
  return <div>Hello! ohyuyn!</div>;
};

export default ohyun;

이렇게 pages 안에 about 폴더를 만들고 파일을 만들었다. 그러면 url에 /about/ohyun을 붙이면 저 페이지로 이동한다.

---

prop-types

prop-types는 props로 넘긴 애들을 검사하는 것이다. 만약 TypeScript를 사용하면 검사 할 필요가 없다.

npm i prop-types

이 명령어로 설치한다.

 

import PropTypes from "prop-types";

const AppLayout = ({ children }) => {};

AppLayout.prototype = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

이런식으로 사용하면 된다. 화면에 그릴 수 있는 모든 것들이 node이다.

---

Link

import PropTypes from "prop-types";
import Link from "next/link";

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>
          <Link href="/"><a>노드버드</a></Link>
          <Link href="/profile"><a>프로필</a></Link>
          <Link href="/signup"><a>회원가입</a></Link>
      </div>
      {children}
    </div>
  );
};

AppLayout.prototype = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

Link를 사용해서 다른 페이지로 이동할 수 있게 하는 기능이다. 다른 페이지를 AppLayout으로 감싸면 저 기능이 생긴다.

---

eslint

eslint는 규칙을 정하기 위해서 사용한다. 즉 코드를 깔끔하게 할 수 있다.

npm i eslint -D
npm i eslint-plugin-import -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -D

이렇게 설치한다. 그리고 -D를 하면 개발 모드로 사용한다는 의미이다.

이걸 설치하면 여러 사람이 코딩해도 한 사람이 코딩한 것 처럼 느껴진다.

 

-eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": ["eslint: recommend", "plugin: react/recommended"],
  "plugins": ["import", "react-hooks"],
  "rules": {}
}

이렇게 사용할 수 있다.