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

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

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

지금 당장은

• resize 이벤트를 달아서 특정 해상도보다 낮음을 감지해서 바꾸는 방법

• css로 특정 해상도에서 컴포넌트를 display를 조절하는 방법

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

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

---

저거슨님, zerocho님 답변 모두 감사드립니다.

두분 답변 모두 도움이 되었는데 채택은 먼저 답변하신 저거슨님으로 드렸습니다.

감사합니다.

---

추가로 아하 개발팀이 이 글을 본다면 답변에 댓글 기능 추가하는걸 개발 일정에 추가해주셨으면..!