[R.N] 리액트 네비게이션

리액트 네비게이션

저번 예제에서 하나의 페이지만 구현했는데 

이번엔 리액트 네비게이션을 사용해 여러페이지(스크린)을 구현했다. 

메뉴를 구성할때는 stack, 사이드드로우를 구성할때는 drawer를 사용했고 

가상으로 더미데이터를 만들어서 컴포넌트에 맞게 데이터를 뿌려주고 

contextAPI와 redux를 활용해 즐겨찾기를 구현해봤다. 

 

그밖에 컴포넌트를 디테일하게 나누고 스타일링도 하면서 리액트네이티브와 좀 더 친해지는

계기가 되었다. 

 

https://github.com/heesangs/RnNavigation

GitHub - heesangs/RnNavigation: basic navigation app

앱 화면

앱 화면 캡쳐

 

앱 영상 (전체화면으로 보세요)

navigation 구현

 

커밋 내용 정리

 

2025‑05‑01

Redux 2

• FavoritesScreen이 Context API 대신 Redux(store + useSelector) 로 완전히 전환됨.

• 필요 없어진 Context 관련 import/comment 처리. 

 

2025‑04‑30

Redux 1

• @reduxjs/toolkit 의존성 추가(package.json·package‑lock.json).

• store/redux 폴더 생성: store.js, favorites.js 리듀서 구현.

• App.tsx에 <Provider store={store}> 래퍼 적용(기존 Context 주석 처리).

• MealDetailScreen에서 Redux용 즐겨찾기 로직 준비. 

Context API 3 – NoData screen

• 즐겨찾기가 비어 있을 때 표시할 “you have no favorite meals yet.” 빈 상태 UI 추가. 

 

2025‑04‑29

Context API 2 – Favorites

• Context를 이용한 즐겨찾기(Favorite) 로직 완성:

• FavoritesContext에 선택/해제 기능 구현.

• FavoritesScreen에서 컨텍스트 사용. 

 

2025‑04‑28

Context API 1

• FavoritesContext 생성 및 Provider 세팅, 즐겨찾기 상태를 전역으로 관리 시작. 

 

2025‑04‑23

Add Nested Navigator

• Drawer → Stack 중첩 네비게이터 구조 적용(상위 Drawer 안에 Stack 삽입).

Add Button In TopNavi

• 상단 네비게이션 바에 커스텀 버튼(아이콘) 배치. 

 

2025‑04‑21

Meal Detail Screen – styling

• 식단 상세 화면 UI 세부 스타일(글꼴, 레이아웃, 색상) 확정. 

 

2025‑04‑20

Meal Detail Screen – DataSetup

• MEALS 더미 데이터와 상세 화면 매핑 로직 완료. 

 

2025‑04‑19

Navigation Options

• 스택 네비게이터 옵션(헤더 색상, 타이틀 등) 정교화.

Add Meals Screen – styling 2

• MealsOverview, CategoryGridTile 등의 카드 레이아웃 완성. 

 

2025‑04‑08

Add Meals Screen – styling 1

• 카테고리별 식단 목록 화면 초안 스타일 적용.

Add Meals Screen

• 기본 MealsScreen 컴포넌트 및 네비게이션 라우트 추가. 

 

2025‑04‑07

Add Navigation

• @react-navigation/native 세팅, Stack 기본 구조 도입. 

 

2025‑04‑03

Navigation Stack Setting & Add Screen

• 첫 번째 Stack 네비게이터와 초기 화면 두 개(예: Categories, Meals) 연결. 

 

2025‑04‑02

IOS & AND Pressable Style

• iOS·Android 플랫폼별 Pressable ripple/opacity 이펙트 조정.

FlatList & CategoryTitle

• 카테고리 리스트를 FlatList 로 교체하고 타일 헤더 추가. 

 

2025‑04‑01

Initial commit: React Native Navigation App setup

• Expo 환경 없이 React Native CLI로 프로젝트 골격 생성, ESLint·prettier 세팅.