디자이너의 네이티브 앱 개발 도전기 #10

디자이너. 네이티브 앱 개발 도전기

위 이미지를 보면 left에서 슬라이드 메뉴를 불러왔을 경우 view 영역을 모두 덮는 모습을 볼 수 있다.

이게 지금 고친 화면이다.

원래는 Yongsan-gu가 슬라이드 메뉴 위에 있었다.

문제가 뭐였냐면

App.js에서 Location Text를 랜더링 하고 Drawer를 랜더링 하는데

Drawer가 App.js의 차일드다 보니 엘리먼트의 밑으로 가라앉는 거였다.

context API를 통해 각 페이지별 app.js의 state값을 넘겨줄 수 있게 되었으니 페이지를 분리시켜 해결하였다.

location을 보여주는 view를 분리하여 따로 파일로 만들었고 그 파일을 page 1(initial page)에서 따로 불러왔다.

page 1은 router에서 불러오는 페이지.

location을 app.js가 아닌 아래 아래 단계에서 랜더링 하니까 해결이 되었다.

큰 문제 해결을 했으니 쉬는 게 아니라 다음으로 큰 Autocomplete 기능을 만들러 가보자.