react 로 만드는 트위터 클론 코딩 - 2

저번시간에 이어서 이번시간에는 각종 page를 만드는것부터 시작하겠습니다.

 

 

 

저는 회원가입 페이지와 프로필 페이지를 만들었습니다.

 

-signup.js

const SignUp = () => {
	return <div>회원가입</div>
}

export default SignUp;

 

-porfile.js

const Profile = () => {
  return <div>내 프로필</div>;
};

export default Profile;

 

 

$npm run dev

 

를 하시면 localhost:3000 에서는 index.js 가 렌더링 되고 localhost:3000/profile 에서는 profile.js 가 렌더링 됩니다.

 

pages 폴더 안에서 하위 폴더도 생성이 가능합니다

 

about 이라는 폴더를 만들고 제이름으로된 js 파일을 만들겠습니다.

 

-pages/about/jongyun.js

const Jongyun = () => {
  return <div>hello jongyun!</div>;
};

export default Jongyun;

 

 

 

다음과 같은 주소로 렌더링 됨을 알수 있습니다.

 

코드를 재사용하기 위해 컴포넌트들을 분리하는 작업을 하겠습니다.

-front/componets 라는 폴더를 만들고 AppLayout.js 라는 파일을 만들겠습니다.

 

 

 

AppLayout 에서는 PropTypes 을 사용하기 위해 라이브러리 하나를 설치합니다.

 

$ npm i prop-types

 

- AppLayout.js

 

import PropTypes from 'prop-types';

const AppLayout = ({ children }) => {
  return (
    <div>
      <div>공통메뉴</div>
      {children}
    </div>
  );
};

AppLayout.PropTypes = {
  // children 이 react 의 화면의 그리는 node type 인지 검사합니다.
  // typescript 를 사용하면 검사 안해도됨.
  children: PropTypes.node.isRequired,
};

export default AppLayout;

 

그리고 이 layout을 다른 파일에 적용 시킵니다.

 

import AppLayout from '../components/AppLayout';

const Home = () => {
  return (
    <AppLayout>
      <div>Hello next</div>
    </AppLayout>
  );
};

export default Home;

 

index.js의 내용이 {children} 안으로 들어갑니다.

 

react에서는 react.router 로 라우터를 관리했었는데 next.js 에서는 자체적인 router를 사용하여 관리합니다.

 

import Link from 'next/link';

 

-AppLayout.js

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

const AppLayout = ({ children }) => {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/signup">회원가입</Link>
      <Link href="/profile">프로필</Link>
      <div>공통메뉴</div>
      {children}
    </div>
  );
};

AppLayout.PropTypes = {
  // children 이 react 의 화면의 그리는 node type 인지 검사합니다.
  // typescript 를 사용하면 검사 안해도됨.
  children: PropTypes.node.isRequired,
};

export default AppLayout;

 

next 의 router -> Link 의 특징은 href를 a태그에 적지 않고 Link 에 적어줍니다.

 

코드를 좀더 예쁘게 적기 위해서 eslint 를 설치합니다.

$ npm i eslint -D

$ npm i eslint-plugin-import -D

$ npm i eslint-plugin-react -D

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

 

-package.json

 

{
  "name": "react-node-bird",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },
  "keywords": [],
  "author": "hajongyun",
  "license": "ISC",
  "dependencies": {
    "next": "^9.5.5",
    "prop-types": "^15.7.2"
  },
  "devDependencies": {
    "eslint": "^7.20.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "2.2.1"
  }
}

 

eslint 를 사용하면 좋은점이 여러명이 협업을 해도 한사람이 코딩한 것 같은 코드로 유지보수를 할 수 있습니다.

 

eslint 파일을 만들겠습니다.

 

front/.eslintrc

 

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

 

eslint 는 ide 별로 따로 설정해줘야 합니다.