샌프란시스코 조용한 코워킹 스페이스에서 이마에 땀방울 맺히며, 단순 API 호출용 Redux 보일러플레이트 200줄을 지웠다. 앱이 다시 숨쉬는 기분이었다.
React 프로젝트에서 내가 그만둔 것들이 모든 걸 바꿔놓았다. 훅이나 패턴 더 추가하는 게 아니다. 빼기다. 무자비하게.
처음 깨달은 건? “유지보수 가능한 React 코드는 최선의 실천을 따르는 게 아니다. 어떤 실천을 그만둬야 하는지 아는 거다.”
유지보수 가능한 React 코드는 최선의 실천을 따르는 게 아니다. 어떤 실천을 그만둬야 하는지 아는 거다.
이게 후크였다. 젠장, 제대로 먹혔다.
서버 상태에 Redux 쓰는 게 날 죽였던 이유
상상해봐라: 매 API 호출마다 괴물이 탄생한다. 액션 타입 3개. 비동기 thunk. 리듀서 케이스. 셀렉터. 컴포넌트 안 useDispatch, useSelector 지옥. 캠페인 목록 불러오는데 200줄 넘게.
전쟁터에서 온 실제 코드:
// 3 action types, 1 action creator, 1 reducer, 2 selectors...
const FETCH_CAMPAIGNS_REQUEST = "FETCH_CAMPAIGNS_REQUEST";
// ... (이해했지?)
연결짓기? 페이지 바뀔 때마다 useEffect로 디스패치. 로딩 상태 여기저기 흩어짐. 에러는 묻혀버림.
그리고 SWR. 15줄. 하나의 훅. 업데이트 시 mutate. Suspense 준비됨. 캐싱? 자동. Stale-while-revalidate? 기본 탑재.
const { data: campaigns, error, isLoading } = useSWR('/campaigns?page=' + page);
개선 효과? 컴포넌트에서 페치 로직 싹 사라짐. 번들 크기 15% 줄음. 디버깅? 문제없음—SWR 개발자 도구가 다 보여줌.
내 특별한 관점: 서버 상태용 Redux는 초기 웹 개발 때 jQuery가 모든 문제를 망치던 꼴과 같다. fetch()와 라이브러리들이 ‘그만’ 하라고 할 때까지 모두가 썼다. React의 다음 변화? 서버 컴포넌트가 클라이언트 상태 머신 대부분 날려버릴 거다.
useEffect 체인 아직 가치 있나?
useEffect 연쇄. 컴포넌트당 5개. 페치 하나. 낙관적 업데이트 하나. 구독 하나. 정리? 악몽.
그만뒀다. useReducer + Zustand 같은 라이브러리(작고 프로바이더 보일러플레이트 없음)로 단일 리듀서 패턴으로 바꿈. 더 나은 건 TanStack Query로 쿼리/뮤테이션.
왜? 이펙트는 조합 안 됨. 싸움—陳腐 클로저, deps 실수로 무한 루프. 리듀서는 중앙화. 하나의 진실 원천.
내 플랫폼에서? 대화 모듈이 8개 이펙트에서 2개 Query 훅으로. 리렌더 절반. 레이스 컨디션? 사라짐.
React 문서가 이펙트를 ‘사이드 이펙트 왕’으로 밀지만, 그건 2018 사고방식이다. 아키텍처가 쿼리를 일류로 뒤집고 있다.
짧은 단락. 잔인한 진실.
Prop Drilling: 태생 죽음
프롭 8단계 깊이 전달. App에서 Footer 툴팁까지 UserId. 리팩토마다? 프롭 캐스케이드 리팩토.
끊음. Context? 네, 하지만 소량—조직 전체 것만. 컴포넌트? 가벼운 스토어 훅으로 소비.
Jotai나 Valtio. 원자 기반. Context 프로바이더 사방 아니야. 수술처럼 구독.
const userId = useAtom(userAtom);
다중 조직 권한? 조직당 원자 하나. 스케일 됨. ‘Context 지옥’ 없음.
사소한 거에 커스텀 훅
useFetchUser. usePaginateList. useOptimisticUpdate. 바퀴 재발명.
멈춤. 라이브러리가 이걸 다 함: 데이터는 React Query/SWR. 애니메이션은 Framer Motion. 헤드리스는 Headless UI.
내 코드베이스? 훅 수 45에서 12로. 전투 검증됨. 버그? 거의 제로.
기업 과대 광고 경고: 페이스북의 ‘훅이 컴포지션 고침’ 주장은 라이브러리 생태계 폭발 이유를 무시한다.
인라인 스타일과 Emotion 과부하
CSS-in-JS 팽창. Emotion 캐시. 번들 부풀음.
Tailwind + 바닐라 CSS 모듈로 전환. 유틸리티 클래스. 런타임 제로.
앱 로드 시간? 모바일에서 40% 빨라짐. Tree-shake 가능. 테마? CSS 변수.
2024 React 개발자한테 왜 중요한가?
React가 ‘올인치즈’ 단계를 넘어 성숙 중. 훅이 힘 줬지만 과엔지니어링 부추김. 이걸 끊는 건? 성장 위한 가지치기.
내 프로젝트 지표: 코드 줄 65% 줄음. 신규 개발자 온보딩? 주가 아니라 며칠. 버그 픽스 3배 빠름.
예언: 2025년까지 React Server Components가 클라이언트 상태 유물로 만듦. SWR 같은 도구가 풀스택 페처로 진화. Redux? 드문 글로벌 싱크용 레거시.
의심? 테스트해봐. 레포 포크해서 한 슬라이스 SWR화. 가벼움 느껴봐.
그리고.
이게 청소다.
🧬 관련 인사이트
- 더 읽기: 216 Pages of GeoCities Nostalgia, One Python Script, and a Lot of Keyboard Rage
- 더 읽기: Tiny Linux Giants: The Base Images Shrinking Your Container Empire
자주 묻는 질문
React 앱에서 Redux 완전 버려야 하나?
서버 상태라면 네—React Query나 SWR로 바꾸세요. 복잡한 클라이언트 로직(undo/redo 등)에만 Redux 유지.
React에서 useEffect 체인보다 나은 건?
로컬 상태는 useReducer나 Zustand, 데이터 페칭은 TanStack Query. 이펙트 적고 deps 제정신.
SWR이 React 프로젝트 프로덕션 레디인가?
당연—Vercel 백업, 캐싱·뮤테이션·페이징 기본 지원. 엔터프라이즈까지 스케일.
