틈

[React] React에서 반응형 웹 대응하기 본문

code/React.js

[React] React에서 반응형 웹 대응하기

남우p 2025. 2. 4. 12:28

Next.js-Typescript 기반에서 반응형 작업을 하고 있는데, 퍼블리셔로서 가장 어려운 것이

window.innerWidth 값을 컴포넌트마다 설정해줘야 하는 것이다.

처음에는 한땀한땀 해보고, <html> 태그에 따로 [data-width] 도 넣어봤지만,

mount 속도가 느린 화면에서는 무용지물... useEffect로 해당 값들이 받아와지지 않았다.

도대체... mount가 끝나는 지점은 어떻게 잡아야 하지!!!!!

의문이 생길 때쯤 신박한 방법을 찾았다.

 

https://velog.io/@sasha1107/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B0%98%EC%9D%91%ED%98%95-%ED%99%94%EB%A9%B4-resize-%EC%9D%B4%EB%B2%A4%ED%8A%B8

 

리액트 반응형 웹을 위한 화면 resize 커스텀 훅

반응형 웹 구현을 위해 화면 크기가 달라질 때마다 화면의 가로나 세로 길이를 구하고자 했다.컴포넌트 내에서 window.innerWidth로 받아오면 처음 렌더링할 때의 가로 길이는 받아올 수 있었는데,

velog.io

 

예전부터 커스텀 훅에 대해서 존재는 알고 있었지만 사용하지 않았는데,

이번 예시를 보면서 정말 편리하다고 생각했다.

 

import useWindowSize from "@/components/window-size";

const Main = () => {	
  const windowSize = useWindowSize();
  return (
  	{windowSize.width && windowSize.width >= 768 ? <button>PC</button> : <button>MOBILE</button>}
  )
}

export default Main;

 

useRouter()  정도로 간단해서 여기저기 따로따로 넣어두었던 반응형 관련 코드들을 걷어내고 해당 훅으로 교체할 예정이다.

 

'code > React.js' 카테고리의 다른 글

[REACT] kakao지도  (0) 2022.06.02
[REACT] 외부 API 받아오기(with typescript) -declare  (0) 2022.06.01
[REACT] useImperativeHandle, forwardRef hook  (0) 2022.05.17
[REACT] react 설치 방법 변경  (0) 2022.05.13
[REACT] 유용한 dependencies  (0) 2022.05.07
'code/React.js' Related Articles more
Comments