[WIL] React Native 디버깅과 Navigation 흐름 정리

이번 주 학습 주제는 크게 두 가지 였습니다.

1. 디버깅과 에러 유형 정리
2. React Navigation 세팅 및 주요 Navigator 이해

완전히 새로운 개념을 배운 주차는 아니었습니다.
하지만 React Native에서 Navigation을 구현할 때 어떤 방식이 있는지, 그리고 이를 사용하기 위해 어떤 서드파티 라이브러리들이 필요한지 전체적으로 훑어보았다는 점에서 의미가 있었습니다.

디버깅과 그 중요성

개발을 하면서 느끼는 건,
기능 구현 속도 자체보다 문제 해결 능력과 해결 속도에서 실력 차이가 난다는 것입니다.

이 강의 파트는 새로운 개념을 배우기보다는,
디버깅 기본기를 다시 점검하는 시간에 가까웠습니다.

잘못된 import로 인해 발생하는 문제

의외로 가장 많이 발생하는 문제입니다.

• 잘못된 경로
• export default / named export 혼동
• 존재하지 않는 파일 import

초기 프로젝트 세팅 단계에서 alias 설정과 ESLint 규칙을 잘 정의해두면
위와 같은 실수는 웬만하면 방지할 수 있습니다.

다만 리팩토링 과정에서 파일 경로가 변경되었는데 import를 수정하지 못한 경우,
또는 불필요한 import가 남아있는 경우 빌드 오류로 이어질 수 있습니다.

현재는 배포 전 빌드 체크를 통해 사전 검증하는 방식으로 관리하고 있어,
이와 같은 이슈는 자주 발생하지 않습니다.

useEffect와 관련된 에러

1. Maximum update depth exceeded
   무한 루프가 발생했을 때 나타나는 대표적인 에러입니다.
   
   대표적인 원인
   1. useEffect 안에서 setState 호출
   2. dependency 배열에 해당 state가 포함되어 있음

   state 변경 -> 재랜더 -> useEffect 재실행 -> 무한 반복

   
   이 문제는 React를 어느 정도 사용해본 개발자라면 반드시 한 번은 겪어보는 이슈입니다.
   
   체크 포인트:

   - dependency 배열이 정확한가?
   - 불필요한 값이 포함되어 있지는 않은가?
   - 콜백을 useCallback으로 감싸야 하는 상황은 아닌가?

2. Unable to resolve module
   존재하지 않는 라이브러리를 import 했을 때 발생하는 에러입니다.

3. Each child in a list should have a unique key prop
   배열을 순회하며 렌더링할 때 key prop을 지정하지 않으면 발생하는 경고입니다.

   최근 테이블 페이지네이션을 구현하면서 실제로 겪은 이슈가 있었습니다.

   row마다 id값을 index 기준으로 설정했는데,
   페이지를 뒤로 갔다가 다시 앞으로 돌아올 때
   마지막에 있어야 할 요소가 맨 위로 올라오는 현상이 발생했습니다.

   원인은 다음과 같았습니다:

   • 페이지가 변경되면서 index 값이 재계산됨
   • 기존 렌더링 구조와 key 값이 충돌
   • React가 기존 요소를 재사용하면서 DOM 구조가 의도와 다르게 유지됨

   해결 방법은 index와 현재 페이지 번호를 조합하여 고유한 key를 생성하는 것이었습니다.

   이 경험을 통해 느낀 점은 index를 key로 사용하는 것은 최후의 수단이어야 한다는 것 입니다.

   가능하다면 항상 고유 식별자(id)를 사용하는 것이 안전합니다.

논리적 오류 (Logical Error)

논리적 오류는 터미널에 에러로 표시되지 않습니다.

코드는 문법적으로 맞습니다.
하지만 기대한 결과가 나오지 않습니다.

이 경우를 논리적 오류라고 볼 수 있습니다.

해결 접근 방식

1. console.log 적극 활용
   • 값이 언제 바뀌는지
   • 어디까지 실행되는지
   • 조건문이 통과하는지
2. 코드 부분 주석 처리
   • 특정 컴포넌트를 통째로 주석 처리
   • 실행 후 이상 동작이 사라졌는지 확인
   • 사라졌다면 해당 컴포넌트가 원인
   • 그 안에서 점점 범위를 줄여가며 원인 탐색

React Navigation

이제 본격적으로 Navigation 세팅을 진행했습니다.

React Native에서 화면 전환은 거의 필수이고,
사실상 표준 라이브러리는 React Navigation인 것 같습니다.

설치는 공식 문서를 참고하여 진행했습니다.

Stack Navigation

Stack Navigation은 페이지를 위로 차곡차곡 쌓는 구조입니다.
기본적으로는

• push
• pop

동작을 지원하고, 새로운 화면을 push하면 스택의 맨 위에 배치 됩니다.

Tip: navigation 폴더를 분리하여 routes.ts 파일에 라우트 경로를 상수로 관리하면 유지보수가 수월합니다.

Drawer Navigation

Drawer Navigator는 좌측에서 슬라이드되는 메뉴를 제공합니다.

• 기능이 많은 앱
• 카테고리가 많은 앱
• 설정 / 프로필 / 기타 화면 분리

에 주로 사용됩니다.

Material Top Tabs Navigator

Material Top Tabs Navigator는 상단 탭 형태의 네비게이션입니다.

• 카테고리 전환
• 콘텐츠 필터링
• 스와이프 기반 UX

에서 주로 사용됩니다.

Bottom Tabs Navigator

Bottom Tabs Navigator는 하단 탭 형태의 네비게이션입니다.

• 주요 기능 간 빠른 이동
• 앱의 핵심 섹션을 상시 노출

마무리

이번 주차는 난이도 자체는 높지 않았습니다.
React 경험이 있다면 충분히 알고 있는 내용입니다.

하지만 앱 개발에서는 화면이 많아질수록 구조 설계 능력이 중요해집니다.

• Stack, Drawer, Tabs를 언제 어떻게 조합할 것인가
• Stack이 깊어질 때 구조를 어떻게 관리할 것인가
• Navigation 흐름을 얼마나 명확히 이해하고 있는가

이 부분이 단순 구현 능력보다 더 중요해진다고 생각합니다.

다음 단계는 배포 과정을 진행하려고 합니다.