2024.07.25 프로그래머스 - React 동적 UI 개발 10

React 로 하는 동적 UI 개발 - 10

React-Slick

• Docs
• 해당 라이브러리는 Swiper 같이 특정 엘리먼트 목록을 슬라이드 형식으로 표현할 수 있게 도와준다.

모바일 대응을 위한 반응형 웹 만들기

• 모바일 대응을 위한 3요소
  1. viewport 뷰포트
  2. 상대값을 가진 레이아웃
  3. 화면 너비 감지 (mediaquery : 미디어 쿼리)

const [isMobile, setIsMobile] = useState<boolean>(window.matchMedia("max-width : 768px").matches)

위의 코드는 현재 최대 미디어 크기가 768px 이하인 것을 확인하는 코드인데

즉, 모바일 환경임을 동적으로 파악하여 boolean 값을 상태에 할당 하는 것이다.

해당 상태를 기만으로 미디어 쿼리 및 여러 모바일 반응형 대응 코드를 수행 시키도록 동적 대응 할 수 있다.

max-width 와 min-width

max-width 와 min-width 는 모바일 반응을 위한 중요한 요소이다

미디어 쿼리 (mediaQuery) 를 통해 화면 스타일링을 진행할 때

해당 screen 요소의 최대 크기 , 최소 크기를 가늠하여

크기에 따른 스타일링을 진행 할 수 있다.

• min-width 스크린크기px

  min-width 는 최소 가로 길이가 개발자가 지정한 스크린크기 이상 인 화면에 대해

  스타일링을 도와준다.

  즉, 1024px을 넣으면, 화면 가로 길이가 1024px 이상인 상태에 대해서는

  해당 미디어 쿼리 스타일을 따르게 된다.

• max-width 스크린크기px

  max-width 는 최대 가로 길이가 개발자가 지정한 스크린 크기 이하 인 화면에 대해

  스타일링을 도와준다.

  768px을 넣으면, 화면의 가로길이가 768px 이하가 됐을 때부터는

  해당 미디어 쿼리 스타일을 따르게 된다.

input 요소의 “inputMode”

PC에서는 인식하지 못하지만, 모바일에서 해당 form 에 접근할 때

입력 해야할 input 요소에 대해 사용자가 모바일 환경에서 클릭했을 때,

키보드가 input 요소의 inputMode 의 정의에 따라 키보드 모드를 자동으로 설정한다.

email 로 설정하면 @ 가 있는, 이메일 입력이 편한 키보드 배열로 모바일로 자동으로 플로팅 되고

url 로 설정하면, url 입력이 더 편한 키보드 설정으로 키보드가 플로팅 된다.