React Naitive, Redux로 미니 투두앱 만들기

2020. 7. 19. 03:17React

final 프로젝트 본격 구현 이전에 리액트 네이티브 연습겸 미니 프로젝트를 진행했다.

 

기능 시연 영상

 

기술 스택은 기본적으로 react hooks, react native, react navigation, async storage를 사용했고,

리덕스 연습을 위해 리덕스 브랜치를 따서 추가적으로 redux, redux-persist를 사용했다.

 

 

연습하고자 했던 내용들은 아래와 같다.

 

1. 리액트 네이티브에서 하위 컴포넌트에 props 넘겨주기

2. 리액트 네이티브에서 반복문을 이용한 컴포넌트 렌더링

3. useEffect를 이용한 비동기 처리 (Async Storage에서 로그인 여부를 가져오는 데에 사용했다.)

4. 탭 / 스택 네비게이션을 nesting 해서 사용하기

5. 네비게이션 이동 시에 params를 넘겨주기

6. 리액트 네이티브의 스타일링에 익숙해지기

7. 리액트 네이티브에서 리덕스 사용해보기

8. redux-persist를 이용해 로그인 유지시키기

 

 

결과적으로는 연습하고자 했던 부분들을 모두 한번씩 짚고 넘어갈 수 있었고, 구현하고자 하는 부분들도 잘 구현되었다.

코드 자체를 더 분리하고 정리할 필요성은 있지만, 지금 시간이 촉박한 상황에서는 의미가 없는 것 같아서 일단은 넘어가려고 한다.

 

 

이거 만들면서 배운게 많아서 좀더 자세히 적고싶은데.. 시간이 없어서 깃허브랑 Expo 링크만 올려둔다.

 

 

Native_ToDo GitHub: 

https://github.com/lsy26499/Native_ToDo

 

Native_ToDo Expo: 

https://expo.io/@seungyeonlee/Native_ToDo

 

 

 

 

 

 

'React' 카테고리의 다른 글

리액트 네비게이션 screen focus 문제  (1) 2020.07.27
React Hooks  (0) 2020.07.02
hash router & browser router  (0) 2020.06.05
React로 Twittler 구현해보기  (0) 2020.04.17