특정 해상도 별로 다른 컴포넌트를 보여줘야할때 어떤 방법을 쓰시나요?

React
1

화면을 구성함에 있어 특정 해상도 이하에서 다른 컴포넌트를 보여주려고합니다.

이럴 때 주로 어떤 방법을 쓰는게 가장 효율적인가요?

지금 당장은

  • resize 이벤트를 달아서 특정 해상도보다 낮음을 감지해서 바꾸는 방법
  • css로 특정 해상도에서 컴포넌트를 display를 조절하는 방법

이렇게 두가지정도 생각나는데요.

비슷한 경험이 있으신 분은 이런 상황을 어떤식으로 해결하셨는지 궁금합니다.

2개의 좋아요
2

저도 몇가지 방법을 시도 하다가, (styled component, pure media query, media query 를 적용해주는 wrapper component, decorator pattern으로 wrapping 하는 방식 등등…)
현재는 body 와 같은 상위 dom 에 현재 스타일 유형을 선언해주는 클래스를 앱 용도에 맞게 기준을 만들어 사용하고 있습니다. (’'app-width-type-[x]", “screen-is-portrait” 등등…) 을 초기에 넣어주고 변경 이벤트시 업데이트 해주고 있습니다. redux등으로 해당 클라이언트 환경 관련 정보들을 한곳에 넣어두고 이 정보가 변경될때마다 body 내 초기 선언했던 클래스도 변경해주고요… 이렇게 해서 react component or stylesheet 등 어느쪽에서도 동일한 값들을 가져다 쓸 수 있게끔…
이를 위해 결국 resize, orientationchange event 를 listening 하구요.
그런데 media query도 상황에 따라 여전히 많이 쓰게 되더라구요. ㅎㅎ 아무튼 저는 이를 지원하는 여러가지 별도 library들은, 시도했다가 모두 제거하게 되었네요.

1개의 좋아요
3

미디어 쿼리로 하면 전체창의 크기로 제어하기는 좋지만 컴포넌트의 크기로 제어하기 조금 곤란해지죠.

그래서

ref 만들고

didMount, didUpdata에서 ref의 너비를 계산하여 state에 넣어주고
state에 따라 render해주는 방법을 쓰기도 합니다.

1개의 좋아요