React

연재중

리액트 제네시스 2부

회차

88화

최근 업데이트

2025년 11월 11일

어떻게 평범한 함수가 클래스의 독점이었던 '상태'를 품게 되었을까요? ‘함수가 상태를 가질 수 있다면?’이라는 단 하나의 질문에서 시작된 탐구. 세바스티안의 깊은 통찰, ‘대수적 효과’에서 얻은 영감의 섬광. 마침내 ‘호출 순서’라는 아슬아슬한 비밀을 발견하고, 커스텀 훅이라는 새로운 대륙에 첫발을 내딛기까지. 클래스라는 낡은 설계도를 불태우고, 리액트의 심장을 재설계하는 위대한 도전. 그 모든 고뇌와 환희가 교차하는, 눈부신 발견의 순간으로 당신을 초대합니다.

리액트 제네시스 2부

회차 목록

거인의 그림자

클래스(Class), 그 견고한 성벽

this와의 첫 번째 전투

로직을 재사용하는 법

구원자인가, 또 다른 괴물인가 (HOC)

포장지 지옥 (Wrapper Hell)

래퍼 지옥을 탈출하라 (Render Props)

콜백의 피라미드

React의 심장, 세바스티안 마크바게

소피 알퍼트의 날카로운 시선

생명주기 메서드의 함정

뒤섞인 관심사

기계는 클래스를 싫어한다

세 가지 거대한 벽

근본부터 다시 생각해야 해.

함수형 프로그래밍이라는 고서(古書)

만약 함수가 상태를 가질 수 있다면?

금단의 아이디어, 대수적 효과(Algebraic Effects)

최초의 실험, createState

소피의 반론, 두 번 호출하면?

마법의 비밀, 호출 순서

useState의 탄생

두 번째 퍼즐 조각, 부수 효과(Side Effects)

useEffect의 설계

클린업(Cleanup) 함수의 발견

의존성 배열 []의 의미

생명주기 메서드의 해체와 재조립

로직 묶어보기: useWindowWidth

커스텀 훅(Custom Hook)의 위대한 발견

이건 혁명이야.

use 접두사의 탄생

규칙은 왜 필요한가?

첫 번째 규칙: 최상위에서만 호출하라

두 번째 규칙: 함수형 컴포넌트에서만 호출하라

인간은 실수를 반복한다

코드의 파수꾼, ESLint 플러그인

useReducer의 등장

Context API와의 결합, useContext

내부 테스트, 그리고 확신

D-Day: React Conf 2018

무대 뒤의 긴장감

React, A-gain

마법의 라이브 코딩

useFriendStatus의 충격

침묵, 그리고 환호

트위터와 레딧의 폭발

내 클래스는 이제 어떡하죠?

Hooks 멘탈 모델 전파하기

라이브러리 생태계의 변화

초심자를 위한 선물

useState 다시 보기: 비동기라는 함정

해답은 함수형 업데이트

useEffect의 세 가지 얼굴: Mount

useEffect의 세 가지 얼굴: Update

useEffect의 세 가지 얼굴: Unmount

무한 루프에 빠지다

코드의 파수꾼, eslint-plugin-react-hooks

문제: Prop Drilling

해결사, useContext

useState의 한계

useReducer, 복잡한 상태의 지휘자

문제: 불필요한 리렌더링

useCallback으로 함수 기억하기

useMemo로 값 기억하기

최적화는 공짜가 아니다

useRef의 첫 번째 얼굴: DOM 금고

useRef의 두 번째 얼굴: 비밀 주머니

첫 번째 커스텀 훅: useToggle

실용적인 커스텀 훅: useInput

생명주기를 품은 커스텀 훅: useWindowWidth

비동기를 다루는 커스텀 훅: useFetch의 탄생

커스텀 훅의 폭발

react-query와 SWR의 등장

움직이는 UI, 살아있는 컴포넌트 (react-spring)

지긋지긋한 폼과의 작별 (React Hook Form)

데이터, 스스로 살아 숨 쉬다 (SWR)

테마를 입는 컴포넌트 (useTheme)

Context를 넘어서 (Zustand)