#hooks

Frontend › React

여러 컴포넌트가 같은 상태 로직(구독, 마우스 위치, 마운트 여부)을 나눠 쓰는 세 가지 방법. 컴포넌트를 받아 감싼 컴포넌트를 돌려주는 고차 컴포넌트(HOC), 무엇을 그릴지 함수로 받는 render props, 훅 안에 로직만 담는 커스텀 훅을 비교하고, 컨테이너 컴포넌트와 커스텀 훅 중 무엇을 재사용할지 고르는 기준을 정리한다.

• #react
• #design-pattern
• #component
• #frontend

Frontend › React

Compound Components, Control Props, Custom Hook, Props Getters, State Reducer를 제어 역전(IoC) 정도와 구현 복잡도로 비교한다. 제어권을 많이 넘길수록 유연해지지만 쓰기 어려워지므로, 필요한 만큼만 고르는 것이 핵심이다.

• #react
• #frontend
• #design-pattern
• #component

Frontend › React

컴포넌트가 화면에 나타나고(마운트) 바뀌고(업데이트) 사라지는(언마운트) 흐름. 함수 컴포넌트에서는 useEffect의 의존성 배열과 cleanup으로 다루고, 클래스 생명주기 메서드는 기존 코드를 읽기 위한 대응표로 정리한다.

• #react
• #lifecycle
• #frontend

Frontend › React

props를 일일이 내려주지 않고 컴포넌트 트리 전체에 값을 공유하는 Context API와, Context로 부족할 때 고르는 전역 상태 라이브러리(Redux Toolkit, Zustand, Jotai).

• #react
• #state
• #frontend

Frontend › React

React가 메이저 버전마다 무엇을 바꿨는지 한 장으로 본다. 16의 Fiber와 Hooks, 17의 새 JSX 변환과 루트 이벤트 위임, 18의 createRoot·자동 배칭·동시성 기능·스트리밍 SSR, 19의 Actions·use·ref as prop·서버 컴포넌트와 제거된 레거시 API, 19.2의 Activity·useEffectEvent, 19.3의 ViewTransition·Fragment ref, 그리고 React Compiler까지 버전별 변경점과 개념 노트를 잇는다.

• #react
• #frontend
• #javascript

Frontend › React

함수 컴포넌트에서 state·생명주기·메모이제이션을 쓰게 해 주는 API와 그 규칙, 커스텀 훅. useEffect를 생명주기가 아니라 동기화로 보는 관점, deps를 줄이는 법, 요청 경쟁 상태 처리까지.

• #react
• #state
• #lifecycle
• #frontend

Frontend › React

컴포넌트가 스스로 관리하는 변하는 데이터인 state, useState와 함수형 업데이트, 배열·객체를 불변으로 바꾸는 방법(ES2023 복사 메서드, Immer), 공통 부모로 state 끌어올리기.

• #react
• #state
• #frontend

Frontend › React

캐시를 먼저 보여 주고 백그라운드에서 재검증하는 데이터 패칭 훅 SWR의 사용 패턴. mutate 옵션 객체와 optimisticData로 캐시를 갱신하고, SWR 캐시로 로그인 상태를 판단해 보호된 페이지를 만든다.

• #react
• #http
• #cache
• #frontend
• #auth

Frontend › React

use는 컴포넌트가 Promise나 Context의 값을 직접 읽게 해 주는 React 19 API다. 조건문·반복문 안에서도 부를 수 있지만 컴포넌트·훅 밖과 try-catch 안에서는 안 되고, 클라이언트에서는 캐시된 Promise만 넘겨야 한다. 서버 컴포넌트에서 만든 Promise를 내려받아 읽는 것이 기본 패턴이다.

• #react
• #frontend
• #async
• #promise