[리액트]nodebird 섹션0. - page와 레이아웃

pages폴더 안에 profile.js / signup.js 파일을 만들어준다.

profile.js

import React from 'react';

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

export default Profile;

signup.js

import React from 'react';

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

export default Signup;

next에서는 별도의 설치 없이 페이지라우팅이 가능하다.

components 폴더를 만들어준다. (파일들을 컴포넌트화해준다.- 분리)

prop-types 설치

npm i prop-types

AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';

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

AppLayout.propTypes = {
  children:PropTypes.node.isRequired,
}
export default AppLayout;

props로 넘길때는 값을 검사를 해주는 것이 좋다.