react-native 캠핑 어플 클론 프로젝트

dongha1992·2021년 1월 10일
0

react-native

목록 보기
5/5
post-thumbnail

프로젝트 영상

전체 동영상

프로젝트 요약

  1. 소개
  • react native expo 기반 캠핑 장소를 찾는 어플리케이션을 클론
  1. 기간
  • 20.12.18 ~ 21.01.08 (14일간)
  1. 인원
  • 프론트엔드 1명
  1. 역할
  • 프론트엔드

사용 스택

  1. react-native expo
  • react-native 입문이라 cli대신 런닝커브가 낮은 expo를 사용함
  1. redux
  • 전역 상태 관리로 redux를 사용함

디렉토리 구조

  1. App.js

login.js에서 로그인에 성공하면 Home으로 넘어간다.

  1. ScreenNavigator.js

bottom-tab 기능을 하는ScreenNavigator.js 에서 name에 따라 route 설정을 해준다.

  1. 스크린

총 4개의 screen으로 구성되는데 사실 filter detail에 스택에 있어야 하는데 navigation 공부가 부족해서 tab과 stack을 만드는 것이 부족해 tab으로 놔뒀다. navigation 기술 부채다!

기능 소개

0) 페이스북 로그인

  • 소셜 로그인을 후 사용자 정보를 AsyncStorage에 저장

1) Home UI

1-1) Category List

  • 백엔드가 없었기 때문에 더미 데이터를 사용했다. tab의 경우는

이렇게 키로 id와 name, place를 가지고 있는 배열을 flatList로 돌렸다. dispatch로 onPress할 때 id값을 가져오고 부모 컴포넌트인 Home.js에서 find를 이용해서 해당 id를 가진 객체를 state에 넣었다.

그리고 실제 해당 tab에 뿌려지는 컴포넌트에 그 리스트를 props로 넘긴다.

백엔드와 통신을 한다면 클릭할 때마다 query를 보내서 탭에 맞는 데이터를 받아오면 되지만 더미 데이터를 사용해야 해서 이렇게 로직을 짰다.

2) map

react-native-map에 제공하는 MapView 컴포넌트를 사용했다. 처음에 구조를 제대로 안 짜서 map tab 컴포넌트, map container 그리고 map list가 각각 다른 컴포넌트가 되어버려 데이터를 주고 받는 데 아주 아주 골치가 아팠다. 시작하기 전에 구조를 잘 짜기...

  • tab을 눌렀을 때 지도에 type에 맞는 데이터 렌더하기

이것도 home에서 tab을 눌렀던 것과 비슷하다.

먼저 하드 코딩으로 tab list를 만들고 부모 컴포넌트인 Detail에서 props로 내려준다. 이제 필요한 것은 리덕스와 useState다. 리덕스에서 state를 정의해준다. 필요한 것은 filters.type

reducer.js

그리고 함수를 정의하고 onPress했을 때 해당 tab을 인자로 가져온다.

가장 아름다운 순간인데 setSelectedTabType이란 액션에 tab을 주는 것이 아니라 {type: tab.type} 이런 식으로 reducer로 넘어갔을 때를 고려해서 미리 할당한다!

이게 무슨 말이냐하면

reducer.js

filters에 있는 하나의 키만 수정하는 것이니까 전개 연산으로 다 flat으로 만들고 type:action.payload가 아니라 ...action.payload로 정의한다. 이렇게 되면 dispatch로 키 값만 잡아주면 state에 얼마나 많은 키가 있는지 상관없이 확장할 수 있다!!!

나는 닥터 스트레인지가 손을 휙휙 저어서 공간을 뚫고 거기에 손을 뻗어서 원하는 물건을 쏙 가져오는 느낌으로 이해했다.

  • 선택된 tab의 type을 적용해서 지도 렌더하기

useSelector로 filters를 가져오고 실제 렌더될 map 컴포넌트에서 로직을 짠다!

일단 row 데이터는 campingData를 state에 넣고 거기에 filteredList라는 변수를 이용해서 가공한다. 그리고 filter된 list를 렌더하면 끝!!

3) map filter

  • 조건에 따라 다르게 리스트 렌더하기

여태까지 했던 것의 마지막 버전! 필수적으로 리덕스가 필요하다. 일단 필터 버튼을 하드 코딩으로 만들어 준다. 여기서 name은 리덕스에서 키값으로 잡아야하니까 리덕스와 맞춰야 한다.

그리고 아까와 마찬가지로 dispatch로 state에 선택된 type을 가져온다.

{sort: button.name}을 통해 리듀서 state에 내가 원하는 키에 데이터를 할당할 수 있다!!

그리고 리스트를 렌더하는 컴포넌트에서 작업을 시작한다.

부끄럽지만 filter.js에서 발생한 이벤트가 전혀 다른 컴포넌트인 map list.js에 어떻게 연결할 함수가 없어서 그냥 컴포넌트 안에 변수를 선언했다. 뭔가 되게 엉망인 거 같지만... 처음이니까 봐준다... 다음부터 열심히하자!

아무튼 아무것도 선택하지 않으면 리덕스에 저장된 initial state의 filter의 조건이 적용되고 무언가 선택하면 저 변수를 통해서 새로운 list가 렌더된다. 삼항 + 함수 조합은 정말 꿀인 거 같다. lists는 row 데이터를 state시킨 것!

4) book mark

북마크는 오직 리덕스를 사용한다! 어려웠던 점은 이미 하트를 두 번 클릭했을 때 삭제하는 로직이었는데 생각보다 아주 간단히 짜버렸다! 먼저 클릭하면 dispatch로 list를 통으로 리듀서로 가져간다.

요렇게 짰다. 추가할 때는 row 데이터를 기준으로 dispatch에 집어 넣고 이미 reducer안에 state에 해당 데이터가 있으면 filter로 삭제한다.

배웠던 점

  • 프로젝트를 진행하면서 새로운 것을 많이 배웠는데 public 관리하는 것을 제대로 익혔다!
  1. image

이렇게 assets 폴더에 넣고 constant 폴더에 images.js에 정의해준다.

그리고 index에서 export

깔끔하다.

  1. 삼항 + 스타일

배열 안에 삼항을 해주면 조건에 따라 추가적인 스타일이 적용된다!

  1. dispatch 에러
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

dispatch 쓸 때 종종 이런 에러가 나왔는데 useCallback에 dispatch를 넣어야 한다는 스택오버플로우 글을 봤다. 해결하진 못했지만 call back 공부와 리덕스 공부를 더 해야할 듯!!

후기

기업 협업을 하면서 react-native 클론 프로젝트를 병행했다. 일단 react-native를 화면이 작아서 UI 구성이 용이한데 아직 익숙하지 않아서 확실히 알아서 했다기엔 너무 많이 찍었다.. 그러니까 이것저것 해보다가 되면 그냥 넘겼다.. 이것 역시 기술의 부채.. 부채만 늘어나.. 라이브러리를 많이 써봐야 하는데 라이브러리를 많이 쓰지 못했다. 즉, react-native의 장점을 살리지 못했다. react-native에 react스럽게 개발한 기분..?

서버랑 통신 없이 혼자서 하는 건 오랜만이다. 1,2차 프로젝트 모두 서버랑 통신을 해서 사실 기능 로직을 구체적으로 짤 필요는 없었는데 목데이터로 내가 직접 기능을 짜면서 바닐라 자바스크립트의 기초의 중요성을 새삼 다시 느꼈다.

리덕스 부분에서 애를 많이 먹었는데 아직도 payload를 주고 받는 것에 어떤 형태인지 잘 모르는 것 같다. 공부할 것이 많다.

참고 : https://www.youtube.com/watch?v=PEI38Pa8ZYM

profile
글과 코드와 사람에 관해 생각합니다.

4개의 댓글

comment-user-thumbnail
2021년 1월 11일

갓동하 못하는게 뭐람

1개의 답글
comment-user-thumbnail
2021년 1월 11일

당신 언제 정리까지.. 배울점이 많은분🙏

1개의 답글