[React] 반응형 레이아웃 적용해보기

앞선 글에서 react-responsive의 useMediaQuery를 이용하여 브라우저의 상태(mobile, pc..)에 대해 얻는 코드를 짜보았다.

 

이번에는 해당 코드를 이용해서 movie-app이 창이 조절됨에 따라 레이아웃이 수정되도록 반응형 레이아웃을 구성해보았다.

(사실 이렇게 하는게 정석적인 방법인지는 모르겠지만.. 공부해가면서 하나씩 수정해보는걸로^^)

 

 

먼저 App에 위치한 isMobile을 

 

Movies class component를 추가하면서 인자로 넣어준다.

 

그 다음, layout의 위치가 바뀌고자 하는 가장 가까운 부모 tag에 App으로부터 전달받은 this.props.isMobile를 참조하여 mobile layout인지 일반 layout인지에 대한 class명을 분기한다.

 

app.css에서 mobie_mobile class의 하위 class에대한 style을 추가한다.(고치고보니 movielink class에만 변화가 있다 ㅎㅎ

 

이렇게하면 아주 손쉽게 브라우저 사이즈에 따라 레이아웃이 반응하는 코드 완성!

(분명 더 좋은방법이 있겠지만, 나는 초보이므로 무언가를 완성시켰다는 것에 의의를 둔다. 코드는 계속 수정될 것이기 때문에 ㅎㅎ)

 

허우야 프론트 너무재밌다!!!!!!!!!

 

github io 주소(코드가 계속 바뀌고있어서 참고만) : mansung-kim.github.io/movie-app/

React App

github repo : github.com/ManSung-Kim/movie-app

ManSung-Kim/movie-app

 

동작은 아래의 동영상과 같다.

 

 

 

앗..벌써 밤 12시다.. 자야겠다.

오늘은 여기까지!