Week 18 – React Router Hooks, Context API 및 대규모 코드베이스 이해하기

Source: Dev.to

React Router Hooks

이번 주는 “React를 배우는” 것보다 “React 개발자처럼 생각하는” 느낌이 더 강했습니다. 저는 세 가지 중요한 React Router 훅에 집중했습니다:

• useParams – URL에서 동적 값 읽기
• useSearchParams – URL 쿼리 문자열과 상태를 업데이트하고 동기화하기
• useNavigate – 프로그래밍 방식으로 네비게이션하기

이 훅들을 통해 URL이 단순히 네비게이션 도구가 아니라 애플리케이션 상태를 저장할 수도 있다는 것을 이해하게 되었습니다.

Additional Routing Concepts

• 중첩 라우트
• 인덱스 라우트
• SPA (Single Page Application) 동작
• 라우트 구조와 흐름

아직 마스터해야 할 고급 라우팅 개념이 몇 가지 남아 있지만, 기본은 이제 명확합니다.

Projects

WorldWise (Main Active Project)

WorldWise에서 적용한 내용:

• 라우팅, 중첩 라우트, 인덱스 라우트
• useParams, useSearchParams, useNavigate

현재 프로젝트는 라우팅 아키텍처와 네비게이션 흐름에 집중하고 있으며, 향후 고급 상태 관리와 Context API를 통합할 계획입니다.

Atomic Blog (Codebase Understanding Project)

Atomic Blog에서는 강의에서 제공된 스타터 코드베이스를 활용했습니다. 처음부터 만들기보다 다음과 같이 진행했습니다:

1. 전체 구조를 읽음
2. 불필요한 부분을 제거
3. 데이터 흐름을 매핑
4. 대규모 React 앱이 어떻게 조직되는지 학습

핵심 구현 내용

• createContext를 사용해 전역 스토어 생성
• Provider로 컴포넌트 감싸기
• useContext로 전역 상태 접근

Advanced Context Patterns

• 파생 상태 (Derived state)
• 커스텀 훅 (예: usePosts)
• 성능 최적화 트릭
• 컴포넌트 외부에 로직 구조화

이 프로젝트는 새로운 코드를 작성하기보다 코드 읽기와 인내심을 강조했으며, 아키텍처를 이해하는 것이 구축만큼 중요하다는 점을 재확인시켜 주었습니다.

Context API Insights

Context API는 커스텀 훅과 파생 상태와 결합될 때 강력해집니다. 라우팅과 함께 사용할 때 실제 애플리케이션을 생각하는 방식이 가능해집니다:

Routing + Global State = Real Application Thinking

Takeaways

• URL‑based state: URL을 통해 상태를 관리하는 것이 이제 자연스럽게 느껴집니다.
• Navigation control: useNavigate를 이용한 프로그래밍적 네비게이션이 간단합니다.
• Global state with Context API: 컨텍스트 프로바이더를 만들고 소비하는 것이 익숙해졌습니다.
• Reading and modifying large codebases: 기존 프로젝트를 분석하고 확장하는 능력이 향상되었습니다.

Next Steps

• WorldWise에 고급 상태 관리를 깊이 적용하기.
• 라우팅 패턴과 고급 Context API 기술을 완전히 마스터하기.