이상청 : 미디어쿼리와 useWindowWidth() 이용한 반응형 웹페이지

💙 반응형 웹

1. 모바일 / PC 사용자 모두에게 이질감 없는 UI 제공

: CSS 미디어 쿼리 사용

2. 모바일 / PC 환경에서 편리한 유저 행동에 근거해 반응형 컴포넌트 렌더링

모바일 : 스크롤로 투표 목록 보기 & 드래그를 통해 찬반 투표가 편리

PC : 슬라이드를 넘기며 투표 목록 보기 & 클릭으로 찬반 투표가 편리

: useWindowWidth()와 조건부 랜더링 사용

 

💙 CSS 단 반응형 처리 : CSS 미디어 쿼리 사용

 

목표 : 기기 타입별 너비를 상수화하며 기기타입을 키 값으로 활용해서 반응형 CSS가 적용되도록 함

 

1. 기기별 타입별 너비 상수화

/constants/deviceInfo.js

 

2. 상수화된 타입별 기기 너비를 이용해 미디어 쿼리문 생성

/styles/mediaQuery.js

 

3. 기기 타입을 키 값으로 활용해 실제 반응형 CSS 적용

 

💙 컴포넌트 단 반응형 처리 : useWindowWidth와 조건부 랜더링 사용

 

목표 : useWindowWidth로 너비 받아오기 -> 상수화 해놓은 breakpoint를 비교 -> 랜더링할 컴포넌트 결정

 

1. 기기 너비를 감지하고 현재 기기 너비를 반환하는 커스텀 훅인 useWindowWidth 작성

 

2. 컴포넌트에서 useWidowWidth를 사용해 조건부 랜더링 진행

컴포넌트 return문에서 적용

 

아쉬운 점:

(1) useWindowWidth로 너비 받아오기(number) -> (2) 상수화 해놓은 breakpoint를 비교(number) -> (3) 랜더링할 컴포넌트 결정

흐름으로 진행하였는데 (2)가 컴포넌트 내부에서 이루어져 좀 덜 직관적인 것 같다..

훅 내부에서 너비에 따라 기기 타입(String)을 리턴하도록 훅을 작성하고

컴포넌트 내에서는 해당 기기타입(String)에 따라 조건부 랜더링하는게 더 좋을 것 같기더...