[React] react 웹 사이트 반응형으로 구현하는 방법

저번에 개발한 넷플릭스 웹사이트를 어느 기기를 사용하더라도 자연스럽게 동작할 수 있도록 반응형으로 구현할 생각이다. 

그 전에 어떤 방법들이 있는지 먼저 살펴보자 💪🏻

 

1. fluid 디자인

반응형이라고 하면 가장 생각하기 쉬운 비율로 컴포넌트 너비나 높이를 설정하는 것이다. 

이를 fluid 디자인이라고 한다. 

Fluid 웹 디자인은 페이지 내 엘리먼트들의 너비(width)를 화면 또는 브라우저 창의 너비에 비례하여 설정합니다. Fluid 웹사이트는 현재 뷰포트의 너비에 따라 확장 또는 축소됩니다. Fluid 디자인은 스크린 크기가 다른 여러 환경에서도 웹 사이트의 사용성을 높이는 데 유용합니다.

 

fluid 디자인 외에도 fixed , responsive, adaptive 디자인 등 다양한 레이아웃 디자인이 있다. 

 

 

2. Break point 

그리고 또 생각할 수 있는 방법은 디바이스 크기에 맞춰 엘리먼트의 크기를 변경하는 것이다. 

모바일	0px ~ 599px
		태블릿	600px ~ 1199px
데스크탑	1200px 이상

일반적으로 기기에 따른 브레이크 포인트이다. 

 

- react에서 브레이크 포인트를 이용해서 반응형 웹을 구현하기 위해서는 두가지 방법이 있다. 

(1) css media query

(2) useEffect, useState로 브레이크 포인트 감지

 

 

3. media query

 

 위에서 css 미디어 쿼리를 사용해서 브레이크 포인트 설정하여 반응형 웹 구현을 할 수 있다고 했는데 

여기서 media query란 CSS3에서 미디어 타입을 개선하여 구체적인 조건이 필요한 스타일을 적용할 수 있도록 확장한 것이다.

 

 

4. react-responsive 

위의 미디어 쿼리를 사용해도 되지만 보다 더 편리하게 구현하기 위해 react에서는 react-responsive 라이브러리를 제공한다. 

 npm install react-responsive --save
 npm install @types/react-responsive --save

 

react-responsive에는 useMediaQuery라는 훅도 제공하기 때문에 더 편리하다. 

*media query 조건에 따라 true, false를 반환하는 hook

 

 

다음은 위의 방법들을 이용하여 react 웹 사이트를 반응형 웹사이트로 수정한 결과를 포스팅하겠습니당

---

Fluid 웹 디자인, 반응형 웹 디자인과 무엇이 다를까?

 

https://gomgomkim.tistory.com/65