리액트 공식문서 기반의 리액트 입문기 - 시리즈 | Dev Thinking Dev Blog

리액트 공식문서 기반의 리액트 입문기

바닐라 자바스크립트 개발자의 리액트 입문기 – 공식 문서로 따라가는 비교 학습 여정

첫 포스트 읽기

로직 재사용의 완성 - 나만의 Custom Hook 만들기

Custom Hook으로 로직 재사용·관심사 분리·유연한 API

Effect 재실행 줄이기 (심화 전략)

Effect 재설계(심화): 의존성 분해·ref·분리로 재실행 절감

의존성 가볍게 - Effect 재설계로 재실행 줄이기 (기본 전략)

Effect 재설계(기본): 파생값 계산·useMemo로 의존성 경량화

이벤트는 즉시, Effect는 동기화 - 역할 분리하기

이벤트는 즉시, Effect는 동기화: 역할 분리 원칙

Effect의 생명주기 관리 - 의존성 배열과 클린업 함수

Effect 생명주기: 의존성 배열과 클린업으로 안정화

Effect 없이 해결하기 (기본편) - 계산, 전달, 렌더링으로 충분한 경우

Effect 없이 해결: 계산·props·이벤트·key로 단순화

사이드 이펙트와의 첫 만남 - useEffect 기본기

useEffect 기본: 렌더 후 외부 시스템과 동기화·클린업

리액트 밖으로의 여행 - Ref로 DOM 직접 조작하기

ref로 DOM 직접 제어: focus·scroll·forwardRef 사용

DOM을 직접 만나다 - useRef로 값 참조하기

useRef로 리렌더링 없이 값 보존, 이전값 추적

상태 관리의 완성 - Context API와 Reducer의 만남

Reducer+Context 결합으로 전역 상태 체계화