반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개키우는개발자 : )

React SNS 2-2. prop-types 와 next 기본 제공페이지 본문

React/React SNS Project

React SNS 2-2. prop-types 와 next 기본 제공페이지

DOGvelopers 2019. 5. 17. 11:29
반응형

React 에서 제공해주는 기능중 prop 검증 기능이있다 부모에서 자식에게 물려주는 값(prop)을 검증해준다.

 

npm i prop-types

prop-types 설치

https://www.npmjs.com/package/prop-types

 

prop-types

Runtime type checking for React props and similar objects.

www.npmjs.com

prop 이 있는곳에 propTypes 설정

 

AppLayout.js

import React from 'react';
import Link from 'next/link';
import {Menu, Input , Button} from 'antd';
import PropTypes from 'prop-types';

const AppLayout = ({children}) =>{
    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item>
                <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item>
                <Menu.Item key="mail">
                    <Input.Search enterButton style={{verticalAlign:'middle'}} />
                </Menu.Item>
            </Menu>
            <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            {children}
        </div>
    );
};

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

export default AppLayout;

_app.js

import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';
import PropTypes from 'prop-types';

const NodeBird = ({ Component }) => {
    return (
        <>
            <Head>
                <title>NodeBird</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.18.1/antd.css" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.18.1/antd.js"></script>
            </Head>
            <AppLayout>
                <Component />
            </AppLayout>
        </>
    );
}

NodeBird.propTypes = {
    Component : PropTypes.elementType,
};

export default NodeBird;

적은 비용을 사용하여 프로그램을 견고하게 만들어준다.

 

페이지 기본동작 원리

 

Next에서 기본적으로 특수한 기능을 하는 페이지를 제공한다.

 

_document.js :  html,head,body

 

_app.js : root

 

_error.js : 에러

 

pages : 실제 실행되는 컴포넌트 ( index.js , profile.js 등등.. )

 

_document.js , _app.js ,_error.js 는 새로 생성해서 적용하지 않으면 기본적으로 Next에서 제공해준다.

 

하지만 Custom 도 가능하다 현재 진행하는 프로젝트에서 처럼 _app.js 안에 직접 사용할 코드를 작성하면 그 내용이

 

덮어씌워져 기본으로 제공해주는 내용에서 새로 작성한 코드내용으로 바뀐다.

 

출처 : https://www.youtube.com/channel/UCp-vBtwvBmDiGqjvLjChaJw

 

ZeroCho TV

조현영(zerocho)의 JS 프로그래밍 강좌 시간 나는대로 저녁 10시 방송합니다. 컨텐츠: 무료 언어 강좌, 유료 실무 강좌(인프런에 올라감), 오픈소스 기여 방송, 책 쓰는 방송, Vue.js 사이드 프로젝트, 제로초 블로그 업그레이드하기 -- 소개 -- Node.js 교과서...

www.youtube.com

 

반응형
저작자표시 동일조건

'React > React SNS Project' 카테고리의 다른 글

React SNS 2-4. 커스텀 훅 재사용하기  (0) 2019.05.17
React SNS 2-3. antd 그리드 시스템  (0) 2019.05.17
React SNS 2-1. _app.js로 레이아웃 분리하기  (0) 2019.05.17
React SNS 1-6. 회원가입 폼 만들기  (0) 2019.05.15
React SNS 1-5. 기본페이지 만들기  (0) 2019.05.15
'React/React SNS Project' Related Articles more
Comments