-
#1-4 Ant design 적용React로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 4. 15:11
엔트디자인
Ant Design - A UI Design Language and React UI library
AntV Simple, professional, with unlimited possibilities for data visualization solutions Learn more
ant.design
*실무에서는 그대로 잘 안쓰임(디자인을 커스터마이징해서 쓰임)
*코드가 다 리액트라 바로 갖다붙임
- npm i antd
( cd front 후 설치 ★)
레이아웃작업
- front폴더-> components폴더-> AppLaout.js
import React, { children } from "react"; import { Menu, Input } from "antd"; const AppLayout = (({ children })) => { return ( <div> <Menu> <Menu.Item key="home">노드버드</Menu.Item> <Menu.Item key="profile">프로필</Menu.Item> <Menu.Item key="mail"> <Input.Search enterButton /> </Menu.Item> </Menu> {children} {/* props인데, 리액트에서 정보를 넘겨주는 방식* index.js에서 AppLayout사용/} </div> ); }; export default AppLayout;- front폴더-> index.js
import React from "react"; import Link from "next/link"; import AppLayout from "../components/AppLayout"; const Home = () => { return ( <> <AppLayout> { /*칠드런 사용 안의 정보들이 칠드런으로 들어감, 그리드 활용에 좋음 */} <Link href="/about"> <a>about</a> </Link> <div>Hello, Next!</div> </AppLayout> </> ); }; export default Home;- css 적용해야함
* head에 css를 넣어줘야함 *
- 링크는 엔트 디자인 사이트에서 가져왔음
import React from "react"; import Link from "next/link"; import Head from "next/head"; import AppLayout from "../components/AppLayout"; const Home = () => { return ( <> <Head> <title>NodeBird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.25.3/antd.min.css" /> /> </Head> <AppLayout> <Link href="/about"> <a>about</a> </Link> <div>Hello, Next!</div> </AppLayout> </> ); }; export default Home;'React로 nodebirdSNS 만들기 (인프런) > #1 Hello, Next.js' 카테고리의 다른 글
#1-7 회원가입 state와 custom hook (0) 2020.01.05 #1-6 회원가입 폼 만들기 (0) 2020.01.04 #1-5 기본 페이지틀 만들기 (0) 2020.01.04 #1-3 Next 라우팅 시스템 (0) 2020.01.04 #1 프로젝트 구조 (0) 2020.01.04