React - Ant Design

더미벨·2022년 7월 9일
1

1차 프로젝트 때는 외부 라이브러리 사용 없이 모든 기능을 수작업으로 만들었었다.(ex. 애증의 캐러쉘,,,,)
근데 2차 프로젝트에서는 드디어 라이브러리 사용이 가능하다 얏호~~!!

리액트에서 라이브러리를 사용할 수 있게 되어 기쁜 것도 잠시, 스타일값을 적용하고 내가 원하는 기능으로 수정하는 데 애를 조금 먹었다^^

처음에는 원하는 라이브러리가 있으면 아무거나 갖다 썼었는데 동기분이 그러면 안된다고 알려주셨다. 출처가 불분명한 라이브러리가 굉장히 많기 때문에 라이브러리를 만든 개발자가 중간에 개발을 그만두면, 사용 도중 에러가 발생해도 해결이 불가능하다는 것이다.

그래서 설치한 라이브러리가 Ant Design이다. 간단한 모달창부터 슬라이더, 캘린더 등 다양한 컴포넌트 라이브러리들이 모여 있기 때문에 ant design 하나만 설치해주면 다양한 컴포넌트 라이브러리들을 편리하게 사용할 수 있다.


📍 Ant Design 설치 방법

$ npm install antd


📍컴포넌트에서 사용하는 방법

import { Slider } from "antd";

const App = () => {
  <Slider
              range={true}
              values={price}
              max={1000000}
              step={10000}
              onChange={price => {
                setPrice(price);
                console.log(price);
              }}
            />
}
 

https://ant.design/components/overview/
위 사이트에서 내가 원하는 컴포넌트를 확인한 후 import 해서 사용하면 된다.

코드모양의 아이콘을 누르면

컴포넌트에 어떤식으로 사용하는지 코드도 확인할 수 있다.



📍 styled-components 이용하여 스타일링하기

위에서 import한 Slider를 스타일링해보자!

import { Slider } from "antd";

const App = () => {
	return(
    	<StyledSlider />
    )
}
  

const StyledSlider = styled(Slider)`
	width: 100px; //적용하고 싶은 스타일 속성
`

괄호 안에 스타일드컴포넌트로 만들 컴포넌트명을 적어주고 return문 안에서 styledcomponent로 새로 만든 컴포넌트명으로 사용해주면 된다.

나같은 경우에는 개발자도구를 열어 Slider 컴포넌트 내에 있는 태그와 클래스명을 확인한 후 nesting 방식으로 각 태그에 속성을 적용해주었다.

⬇️예시

const StyledSlider = styled(Slider)`
	width: 100px; 

.className {
	font-size: 10px;
}
`




그럼 이제부터 ant-design을 잘 활용하여 근사한 웹사이트를 만들어보자!^___^ 아자아자~~!~!~

profile
프론트엔드 개발자👩‍💻

0개의 댓글