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

Question

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

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

지금 당장은

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

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

---

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

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

감사합니다.

---

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

저거슨 · Accepted Answer

class AppComponent extends React.Component {

constructor(props) {
    super(props);
    this.state = {width: props.width};
  }

componentWillMount(){
    this.setState({width: window.innerwidth+ 'px'});
  }

render() {
    // render your component...
  }
}이런식으로 width값을 구해와서 크기에 따라 바꿔주는게 좋다고 생각합니다.

zerocho · Answer

일단 컴포넌트가 매우 크지 않는 이상 저는 css로 처리하겠습니다. 미디어쿼리로 display를 조절할 것 같고요. 이렇게 한다면 리액트는 건들지 않고 CSS만 조작하면 돼서 매우 편리합니다.

컴포넌트가 매우 크지 않는 이상이라는 조건을 단 이유는 css로 display: none을 하더라도 컴포넌트가 분명 DOM 상에는 존재하기 때문입니다. 컴포넌트가 크다면 비효율이 발생할 수 있어서, 그 때는 아예 코드로 제거를 하는게 좋을 것 같습니다.

componentDidMount에서 window.matchMedia로 화면을 체크해서 dom에서 제거하거나 하시면 되겠습니다. 단, 이 경우에는 잠깐의 화면 뒤틀림이 발생할 여지가 있습니다. 렌더링이 한 번 된 후에 제거하는 거라서요.

> Hello, world