프로토타입을 빠르게 만들다보면, 디자인, 애니메이션과 같은 부분에 신경쓸 시간이 많지 않다. 이럴 때 다양한 템플릿으로 개발을 빠르고 간편하게 진행할 수 있도록 도와주는 것이 바로 Semantic UI이다. 다른 서비스들도 많지만 이번에는 React에서 Semantic UI를 적용하는 것을 알아보자.
Introduction - Semantic UI React
아래 명령어를 사용해 semantic-ui-react와 semantic-ui-css를 프로젝트에 설치한다.
npm install semantic-ui-react semantic-ui-css
create-react-app으로 프로젝트를 만들었다면, index.js파일에 semantic css 파일을 전역으로 import 해준다. 이 과정을 진행하지 않으면, 컴포넌트들이 예쁘게 나오지 않는다...!
(혹시 vite와 같이 다른 방식으로 프로젝트를 만들 때에도 동작하는지 아시는 분이 있다면 추가 부탁드립니당🙂)
import 'semantic-ui-css/semantic.min.css'
만약 리스트를 넣고싶다면, 목록에서 리스트를 고른 후, 마음에 드는 형태의 리스트를 고른다. 이후 Try it 버튼을 눌러 코드 샘플을 보자!