antd & styled-components

ant design과 styled-components를 써서 프론트 화면을 구성해보자.

 

ant design react vue angular 다 호환이 가능하다. 이걸 쓰면 버튼 아이콘들을 가져다가 쓰기만 하면된다.

 

그리고 react에 css를 입힐 때 여러가지 방법이 있는데 css를 순수하게 쓰는거, css가 비효율적이니까 SCSS나 SASS LESS등 이러한 CSS 전처리기를 써서 하거나 react같이 컴포넌트 식으로 개발하는 곳에선 styled-components를 쓴다.

아예 컴포넌트 자체에 css를 미리 입혀서 컴포넌트로 만드는 것이다. styled-components를 하게되면 emotion도 할 수 있을거다.(emotion은 SSR할 때 편리하다.)

 

npm trends에서 두 사이트를 비교를 해보자. 그리고 왜 리액트를 해야될까? 이것도 보자.

 

이제 본론으로 넘어가서 antd와 styled-components를 설치해주자. icon들 같은 경우는 용량을 많이 차지하기 때문에 antd를 설치하더라도 따로 설치를 해주자.

npm i antd styled-components @ant-design/icons

"dependencies": {
    "@ant-design/icons": "^4.2.2",
    "antd": "^4.6.6",
    "styled-components": "^5.2.0"
  },

 

메뉴창부터 디자인을 해보자. 컴포넌트는 메뉴창을 하고 싶으니까 여기서 show code를 눌러서 코드를 복사해서 가져오면 된다. menu예제가 class로 컴포넌트로 되어있는데  class 컴포넌트를 hooks로 바꾸는 작업은 알아서 해보자.

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



const AppLayout = ({ children }) => {
    return (
        <div>
            <Menu mode="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>
        </div>
    );
};


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

export default AppLayout;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의