RN 수업 3차시 상태 관리 & API 연결

1. Props Drilling의 문제점

데이터가 여러 컴포넌트를 관통하며 전달되는 문제

• 생기는 문제점
  • 강한 결합
  • 디버깅 복잡성 증가
  • 불필요한 리렌더링

1-1. 전역 상태 관리

위 Props Drilling 문제를 해결하기 위해 사용하는 방법

• 사용 시그널
  • 3단계 이상으로 props 전달이 깊어질 경우
  • 한 화면의 변경이 다른 화면 UI를 바꾼다.

1-2. Zustand

npx expo install zustand

• 장점
  • 초경량 : 1.1KB gzipped
  • 단순함 : 보일러플레이트가 거의 없음.
  • 고성능 : 선택적 리렌더링 구독 기반 업데이트

import { create } from 'zustand'
 
const useAUthStore = create((set) => ({
	user: null,
	isLoggedIn: false,
	
	setUser: (user) => set({ user, isLoggedIn: true}),
	logout: () => set({user: null, isLoggedIn: false}),
}))

• create()
• setUser
• logout

const HeartIcon = () => {
	const {likedPosts, toggleList } = usePostStore()
	
	return (
		
	)
}

컴포넌트에서 사용하면 이점

1. Hook 처럼 사용
2. 구독 기반 업데이트
3. 액션 호출

2. API 통신

2-1. 데이터 불러오기

1. 상태 선언 : useState 데이터와 로딩 상태 관리
2. 비동기 호출 : useEffect안에서 async 함수를 선언
3. 응답 처리 : JSON 파싱 후 setState 저장
4. 에러 처리 : try/catch 네트워크 오류 대비

2-2. 로딩 & 에러 상태 처리

1. 로딩 상태 : ActivityIndicator 표시
2. 에러 상태 : 에러 메시지 + 재시도 버튼 네트워크 오류에 대비
3. 데이터 표시 : FlatList로 데이터 렌더링 정상 응답 시 최종 화면

2-3. API 통신 생명주기

1. 사용자 액션
2. 요청 시작
3. 응답 대기
4. 성공/실패 분기
5. 리렌더링

Axios Interceptor 개요

import axios fro 'axios'
 
const api = axios.create({
	baseURL: 'https://api.example.com',
	timeout: 5000,
	headers: {
		'Content-Type': 'application/json'
	}
})
 
export default api

요청 Interceptor

api.interceptros.request.use(
	(config) => {
		const token = getToken()
		
		if(token) {
			config.headers.Authorization = `Bearer ${token}`
		}
		
		console.log('[REQ]', config.url)
		return config
	}
)

응답 Interceptor

api.interceptors.response.use(
	(response) => response,
	
	(error) => {
		
	}
)