REACT로 카페 만들기 프로젝트 (2)

서론

이번 프로젝트는 부트스트랩을 사용했다.

부트스트랩은 좀 더 편하게 스타일을 꾸미고 싶을 때 사용한다.

아니, 스타일을 꾸민다기보단 보편화 되어 있는 기능을 편하게 구현하고 싶을 때도 사용한다.

골치아픈 드랍다운 버튼이라던가 말이다.

 

나는 처음부터 CSS로 전부 구현하는 게 싫어서 부트스트랩을 사용했다.

부트스트랩으로 이미 완성된 컴포넌트를 불러와서 그걸 조금씩 수정하는 게 훨씬 간편하다.

다만 아닌 경우도 있다.

버튼 같은 경우에는 부트스트랩에서 불러오면 워낙 적용된 효과가 많기 때문에 사용자가 색깔을 바꾸는 것조차 쉽지 않다.

적당히 때를 잘 보고 쓸 줄 알아야 한단 소리다.

 

REACT의 부트스트랩

일반적인 자바스크립트 프로젝트에서 부트스트랩을 사용하는 방법과 리액트 프로젝트에서 부트스트랩을 사용하는 방법은 다르다.

리액트에서 부트스트랩을 사용하기 위해서는 JSX를 사용해야한다.

그 말은 즉 부트스트랩을 컴포넌트로서 불러온다는 뜻이다.

 

자바스크립트는 class 명을 사용해서 부트스트랩을 제어하지만 리액트는 다르다.

npm을 통해 리액트용 부트스트랩을 다운받고 import로 원하는 컴포넌트를 불러와서 사용한다.

그래도 이런 부분만 다르지 결국 전체적인 사용방법은 자바스크립트와 상당히 유사하다.

 

React-Bootstrap · React-Bootstrap Documentation

React-Bootstrap

이 사이트를 클릭하면 리액트에서 부트스트랩을 사용하는 방법을 문서로 잘 정리해서 보여준다.

클릭하면 내가 불러낼 수 있는 컴포넌트가 굉장히 많은 걸 볼 수 있다.

저걸 전부 다 사용할 필요는 없고 필요한 것만 사용하면 된다.

하지만 Container같은 경우는 꼭 사용하라고 말하고 싶다.

 

Container는 테이블이라고 생각하면 편하다.

안에 Row와 Col같은 컴포넌트 요소가 들어갈 수 있다.

결국 뭔가를 담는 div 태그와 같은 역할을 하는 컴포넌트 요소들이다.

그럼 이거를 왜 써야하는가?

그 이유는 그냥 div를 사용하는 것과 부트스트랩의 Layer 요소를 사용하는 것과는 엄청 다른 차이가 존재하기 때문이다.

 

부트스트랩

부트스트랩의 가장 간편한 기능은 반응형이다.

반응형이란 화면의 크기에 따라서 달라지는 스타일을 말한다.

30인치 모니터와 핸드폰 스크린에 똑같은 화면을 보여줄 수는 없는 노릇아닌가.

CSS에서 이 반응형을 구현해본 사람이라면 공감할 텐데, 정말 열받는 작업 중 하나다.

일반적인 CSS 코드는 이 작업 하나로 2배 이상 길어지기도한다.

 

부트스트랩이 이 반응형에서 줄 수 있는 메리트는 5개의 브레이크 포인트를 제공한다는 점이다.

브레이크 포인트란 그냥 화면의 크기의 유형이라고 인식해두면 편하다.

즉, 5가지의 화면 크기의 유형을 제공한다는 뜻으로 알아들어도 괜찮다.

 

부트스트랩을 이용하면 이 5가지 유형의 화면 크기에 대해서 각기 다른 작업이 이루어지도록 할 수 있다.

가령, 큰 화면에서는 요소들이 가로로 한 줄로 쫙 나열되지만

중간 크기에서는 요소들이 가로로 2줄 씩 나뉘어서...

더 작은 크기의 화면에서는 5줄로 나뉘어서 정렬되도록 할 수도 있다.

 

그 브레이크 포인트는 다음과 같다.

sm, md, lg, xl, xxl

sm이 가장 작은 화면이고 xxl이 가장 큰 화면이다.

일반적인 div는 이런 브레이크 포인트를 제공하지 않는다.

그래서 굳이 부트스트랩에서 제공하는 Container와 Row&Col을 사용해야하는 이유다.

 

그리고 부트스트랩에서 불러온 Container같은 경우에는 그 전체적인 Width가 화면에 크기에 맞춰서 줄어든다.

다만 줄어드는 방식이 1100px -> 990px -> 800px 과 같이 계단식으로 줄어든다.

이런 모양새가 이쁘지 않다면 <Container fluid>를 불러오면 된다.

이건 계단식이 아니라 1px 단위로 부드럽게 Container의 Width와 현재 화면의 크기를 맞춰준다.

 

한계

내가 부트스트랩을 잘 못 사용해서 그런건지는 모르겠지만 여러모로 한계를 느끼긴했다.

다섯개의 브레이크 포인트를 제공하고 거기에 맞춰 스타일의 구성을 바꿀 수 있지만 그건 어디까지나 "레이아웃"의 영역에 한해서다.

전체적인 레이아웃의 구성을 바꿀 수 있어도 그 외의 세세한 작업을 반응형으로 하기 위해선 결국 개발자의 손을 타게 된다.

 

예를 들면 스크린이 좀 더 작은 화면에선 내부의 요소들을 2줄이 아니라 3줄로 나눠서 보여주도록 할 순 있지만,

글자의 크기나 여백을 줄일 순 없다.

 

그리고 부트스트랩을 통해서 Image같은 컴포넌트를 사용하게 되면 본래 img 태그가 가지고 있던 기능을 사용하지 못하게 되면서 오히려 불편함에 빠질 수 있는 가능성이 있다.

나 같은 경우엔 img 태그의 onError 기능을 사용하고 싶었는데 사용할 수 없었다.

아마도 다른 컴포넌트에도 비슷한 경우가 있을 수가 있다.

 

아무튼 부트스트랩은 좋은 기술이다.

열심히 숙련시켜서 다음에 또 써먹고 싶다.

오늘은 이만🖐🖐