[클라우딩 어플리케이션 엔지니어링 TIL] 240227 - React Bootstrap 컴포넌트화

Intro

---

오늘은 리액트에서 자주 사용하는 라이브러리인 리액트 부트스트랩에 대해 알아보고 실습해 보았다.

 

 

오늘 학습한 내용

---

React Bootstrap

React Bootstrap | React Bootstrap

리액트 부트스트랩은 라이브러리 중 가장 크기가 작은 라이브러리이다. 따라서 작은 서비스를 개발할 때 사용하면 좋은 라이브러리이다.

현재도 업데이트 되고 있고 향후에도 잘 관리될 라이브러리이기 때문에 안전하게 사용할 수 있다.

 

부트스트랩의 컴포넌트, 레이아웃은 직접 써보며 적용해보며 라이브러리를 익혀보는 것이 좋다.

 

 

patterns

Patterns.dev

 

리액트의 디자인 패턴을 참고하기 좋은 사이트

HOC pattern나 compound pattern을 주로 사용한다.

 

⚠️ 기능을 새로 만드는 것 보다는 이미 구현된 라이브러리를 잘 활용하도록 하자!!

 

 

 

CSS Module (module.css)

CSS Module을 사용하면 리액트 프로젝트에서 CSS 클래스가 중첩되는 것을 방지할 수 있다.

import styles from './EventBootstrap.module.css'

const EventBootstrap = () => {
  return <div className={styles.Box}></div>
}

export default EventBootstrap

 

위의 예시에서, import해 온 styles 객체의 값(클래스명)을 참조하여 사용하면 된다.

 

 

 

 

 

마무리

---

미리 만들어 둔 컴포넌트를 사용해서 개발하면 확실히 개발 시간이 확실히 단축될 것 같다.

또 웹 페이지를 개발할 때 직접 모든 컴포넌트를 개발하는 것이 아니라 이러한 라이브러리를 활용하여 UI를 훨씬 보기 좋게 구현하는 것을 알게 되었다.