# React 기술 질문 답변

## 1. React Router의 동적 라우팅(Dynamic Routing)

### 정의
- URL의 특정 부분을 변수처럼 사용하여 하나의 라우트로 여러 페이지 처리
- `:` 기호로 동적 세그먼트 정의

### 기본 사용법
```jsx
// 라우트 정의
<Route path="/user/:userId" element={<UserProfile />} />

// 컴포넌트에서 사용
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

주요 사용 사례

• 블로그 포스트: /post/:postId
• 상품 상세: /product/:productId
• 다중 파라미터: /category/:categoryId/product/:productId
• 사용자 대시보드: /dashboard/:userId/settings

참고 자료

• React Router 공식 문서
• FreeCodeCamp - Dynamic Segments

2. 네트워크 속도가 느린 환경에서의 UX 개선

UI/UX 디자인 전략

스켈레톤 스크린

• 빈 화면 대신 콘텐츠 윤곽 표시
• 체감 로딩 속도 개선

점진적 로딩

• 중요한 콘텐츠 우선 표시
• 부가 콘텐츠는 지연 로드

명확한 피드백

• 로딩 상태 표시
• 진행률 바 또는 메시지 제공

오프라인 지원

• Service Worker 활용
• 캐시된 데이터로 기본 기능 제공

기술적 최적화 방법

이미지 최적화

<img 
  src="image.webp" 
  loading="lazy"
  srcSet="small.webp 400w, large.webp 800w"
/>

Code Splitting

const Heavy = lazy(() => import('./Heavy'));

<Suspense fallback={<Skeleton />}>
  <Heavy />
</Suspense>

데이터 캐싱

const { data } = useQuery({
  queryKey: ['user', userId],
  queryFn: fetchUser,
  staleTime: 5 * 60 * 1000
});

기타 최적화

• HTTP 요청 최소화 (API 병합)
• CDN 활용
• Gzip/Brotli 압축
• 번들 크기 최적화

참고 자료

• Medium - Designing for Slow Networks
• BrowserStack - UX Optimization

3. React 상태 관리 비교

지역 상태 관리

useState

const [count, setCount] = useState(0);

• 간단한 상태 (폼 입력, 토글 등)
• 단일 컴포넌트 내부

useReducer

const [state, dispatch] = useReducer(reducer, initialState);

• 복잡한 상태 로직
• 여러 연관된 상태값
• Redux 패턴, 테스트 용이

Context API

특징

• 상태 전달 도구 (관리 도구 아님)
• useState/useReducer와 함께 사용

장점

• prop drilling 해결
• 설정 간단, 추가 라이브러리 불필요

단점

• 성능 이슈 (Provider value 변경 시 전체 리렌더링)
• 디버깅 도구 부족

적합 케이스

• 테마, 언어 설정
• 인증 정보
• 자주 변경되지 않는 전역 설정

전역 상태 라이브러리

Zustand (가볍고 간단)

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

// Provider 없이 사용
const { count, increment } = useStore();

Redux Toolkit (대규모 앱)

const slice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: { increment: state => { state.value += 1 } }
});

선택 가이드

실전 팁

• useState로 시작
• prop drilling 3단계 이상 → Context 고려
• Context 성능 문제 → Zustand 전환
• Redux는 정말 필요할 때만 (복잡한 미들웨어, DevTools 필수)

참고 자료

• React State Hooks
• Zustand vs Redux
• Zustand GitHub