react.js - Ant Design / styled-components

리액트로 프론트 작업을 하다보면, 디자인을 해야하는 상황이 생긴다.
레이아웃을 잡고, 색을 고르고 모양을 신경쓰고 해야 하는데,

Ant Design은 그런 불편함을 최소화 시켜주고 UI/UX를 쉽게 개발해서 적용할 수 있는 CSS 프레임워크이다.

사실 CSS 프레임워크중에도 굉장히 다양한 것들이 있다.

Material UI, React Bootstrap, Semeantic UI, Ant Design, Materialize 등 굉장히 다양하지만,

Ant Design으로 작업해보려고 생각하는 이유는 다른 프레임워크에 비해 매우 깔끔하고 요즘 사람들이 좋아하는 디자인으로 만들 수 있다는 것이다. 누가봐도 호불호 없고 ant design 틀을 쓰며 커스텀도 가능하고 조금 찾아보면 사용하기도 편리하다.

그렇기에 Ant Design을 선택했다. 중국에서 만들어진 프레임워크라고 한다.

Ant Design 설치

npm install antd --save

이렇게 ant design을 설치해주면 된다.

그 후, react의 App.css 파일의 첫 줄에 아래 코드를 추가한다.

@import '~antd/dist/antd.css';

그 후, 간단한 Ant Design 테스트를 위해 (연동이 잘 되어있는 지) app.jsx 코드를 변경해준다.

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

이렇게 변경해준 후, npm start를 하면 버튼이 보일 것이다.

이제 Ant Design 문서로 가서 원하는 디자인을 선택하면 된다.

레이아웃 같은것도 너무 다양하고 깔끔해서 자주 사용한다.

https://ant.design/components/overview

원하는 것을 찾은 후, <> 아이콘 버튼을 클릭 하면 소스코드가 나오는데,

원하는 방향으로 커스텀 할 수도 있고 props 도 친절하게 나와있다.

styled-components

보통 자주 사용하는 조합인 ant design + styled-components 조합이다.

styled-component는 기존에 css 파일을 밖에 두고 id나 class의 이름을 가져와서 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것이다.

css 파일을 바깥에 두지 않고 컴포넌트 내부에 넣기 때문에, css가 중첩되지 않도록 만들어주는 장점이 있다.
그리고 보통 커스텀할 때도 유용하게 사용한다.

npm install styled-components

터미널에서 styled-components를 install 한다.

그 후, ant design을 사용할 컴포넌트에 import를 한다.

import styled from 'styled-components';

그 후, ant design의 무언가를 커스텀 하고 싶다면, 그 커스텀할 것을 지정한다.

import React from 'react';
import styled from 'styled-components';
import { Button } from 'antd';

const ButtonWrapper = styled(Button)`
    background: green;

    :hover {
        background: green;
    }
`;

const antdForm = () => {
    return (
        <>
        <ButtonWrapper type="primary">
            버튼
        </ButtonWrapper>
        </>
    );
};

export default antdForm;

이런식으로 커스텀이 가능하다.