[사이드 프로젝트] snsbird #2. antd와 반응형 그리드

devMag 개발 블로그·2022년 5월 2일
0

antd

  • antd는 react, vue, angular에서 사용할 수 있다.
npm i antd styled-components @ant-design/icons
// AppLayout.js

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

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

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

export default AppLayout;

react와 antd 를 같이 쓰기

_app.js와 Head

_app.js

  • antd와 react를 같이 쓰려면 제공하는 css 파일도 써줘야한다.
  • next.js는 웹팩이 포함되있어서 css 파일을 import해서 사용할 수 있게 도와준다.
  • 그런데 이런 공통적인 것을 하나의 페이지마다 import 하기보다는 _app.js 파일을 만들어서 넣어주자.
  • pages 폴더에 _app.js 를 만들어주자.

_app.js 는 pages 폴더내에 있는 모든 컴포넌트의 부모에 해당한다.
즉, 모든 컴포넌트에서 사용할 것은 _app.js에서 코딩을 하면 되고, 특정 컴포넌트에서 적용할 것은 AppLayout.js 와 같은 곳에서 사용해주면 된다.

// _app.js

import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';

const NodeBird = ({ Component }) => {
    return (
        <Component />
    );
};

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

export default NodeBird;

  • 우리는 HTML 에서 body에 주로 코드를 작성하지만 때로는 head 부분에도 우리가 원하는 코드를 작성해야될 때가 있다.
  • next에서 head를 이용하는 방법은 아래와 같다.
    • 모든 pages의 부모인 _app.js 에서 사용하면 된다.
    • title을 페이지마다 다르게 하고 싶다면 해당 페이지마다 Head를 import 해와서 사용하면 된다.
// _app.js

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import 'antd/dist/antd.css';

const NodeBird = ({ Component }) => {
    return (
        <>
            <Head>
                <meta charset="UTF-8" />
                <title>NodeBird</title>
            </Head>
            <Component />
        </>
    );
};

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

export default NodeBird;
// profile.js

import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';

const Profile = () => {
    return (
        <>
            <Head>
                <title>내 프로필 | NodeBird</title>
            </Head>
            <AppLayout>내 프로필</AppLayout>
        </>
    );
}

export default Profile;
// signup.js

import React from 'react';
import Head from 'next/head';
import AppLayout from '../components/AppLayout';

const Signup = () => {
    return (
        <>
            <Head>
                <title>회원가입 | NodeBird</title>
            </Head>
            <AppLayout>회원가입 페이지</AppLayout>
        </>
    );
}

export default Signup;

반응형 그리드 사용하기

  • 해쉬태그 검색창을 만들어주자.
// AppLayout.js

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

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

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

export default AppLayout;

  • antd에서 반응형을 지원하는 Row 와 Col을 사용해보자.
  • 일단 가로 기준으로 나누고서 가로 한 칸 안에서 세로를 나누는 순서대로 해보자.
  • 프론트엔드 개발을 할 때, 모바일을 기준으로 먼저 만들어주고 그다음 태블릿, 데스크탑 순서로 하자

즉, 지금 반응형 만들기 기준은 아래와 같다.

  1. 가로를 기준으로 만들고 세로로 만든다.
  2. 모바일 퍼스트
// AppLayout.js

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';
import 'antd/dist/antd.css';

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

            <Row gutter={8}>
                <Col xs={24} md={6} >
                </Col>
                <Col xs={24} md={12}>
                    {children}
                </Col>
                <Col xs={24} md={6}>
                    <a href="https://www.zerocho.com" target="_blank" rel="noreferrer noopener">Made by Zerocho</a>
                </Col>
            </Row>
        </div>
    );
};

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

export default AppLayout;

위 코드를 해석해보자.

  • <Col xs={24} md={6} />
    • antd는 가로기준으로 24 칸으로 가로 화면을 나눈다.
    • xs사이즈(모바일)에서는 24박스를 다 쓰겠다는 것
  • md={6} 은 데스크탑 사이즈정도 되었을 때 6칸을 차지하겠다는 것
  • md가 6 12 6 이면 6칸 12칸 6칸을 차지해서 세개가 한 줄에 배치된다.
  • 태블릿은 sm, 대화면은 xl 등을 사용하면 된다.
  • 커스텀도 가능하다.
  • <Row gutter={8}> 에서 gutter는 컬럼사이의 간격을 말한다.
  • <a href="https://www.zerocho.com" target="_blank" rel="noreferrer noopener">Made by Zerocho</a>
    • _blank로 새 창을 열려고 하면, 보안 위험이 있어서 rel="noreferrer noopener" 를 같이 적어줘야한다.
profile
devMag 개발 블로그
최근 공부 내용 정리 Notion Link : https://western-hub-b8a.notion.site/Study-5f096d07f23b4676a294b2a2c62151b7
이전 포스트

[사이드 프로젝트] snsbird #1. Next.js

다음 포스트

[사이드 프로젝트] snsbird #3 LoginForm, 리렌더링 이해하기, 더미데이터로 로그인하기

0개의 댓글