React를 처음 사용할 때는 대부분 상태를 useState로 관리한다.const [value, setValue] = useState(''); 값이 바뀌면 React가 다시 렌더링하고, UI는 그 상태를 기준으로 업데이트된다.이게 React의 기본 흐름이다.하지만 모든 값을 state로 관리하는 게 항상 좋은 선택은 아니다. input에 focus 주기DOM 크기 측정하기이전 값 기억하기부모 컴포넌트에서 자식 input을 제어하기같은 작업은 state보다 ref가 더 적합한 경우가 많았다.이때 사용하는 Hook이 useRef다.useRef란useRef는 렌더링 사이에서 값을 유지할 수 있는 객체를 만든다.const ref = useRef(initialValue);반환값은 이런 형태다.{ current: initialValue...
React Lifecycle을 Fiber 기준으로 이해하기처음 React의 lifecycle을 배울 때는 보통 이렇게 이해한다.mount update unmount클래스 컴포넌트 기준으로는componentDidMount...
실제 DOM을 직접 다루면 왜 문제가 될까브라우저의 실제 DOM은 단순 JavaScript 객체가 아니다.DOM을 변경하면 브라우저는 상황에 따라 여러 작업을 수행해야 한다.DOM 변경 → style 계산 → layout 계산...
useTransition / useDeferredValue처음 React 성능 최적화를 할 때는 대부분 이런 방향으로 접근했다.memo useMemo useCallback물론 중요하다.그런데 실제 서비스를 운영하다 보면 단순 memoization만으로 해결되지 않는 문제가 있었다.특히검색창 입력대량 리스트 필터링차트 렌더링탭 전환dashboard UI같이 “입력은 즉시 반응해야 하지만 뒤쪽 렌더링은 무거운” 경우다.예를 들어 검색창이 있다고 하자.사용자 입력...
ReactNode vs ReactElement처음 React + TypeScript를 사용할 때 가장 헷갈렸던 타입 중 하나가ReactNode ReactElement JSX.Element였다.특히 이런 코드에서 자주 봤다.function Layout({...
tooltip 위치를 계산한다고 하자.처음에는 자연스럽게 이렇게 구현했다.useEffect(() => { const rect = ref.current?.getBoundingClientRect(); setPosition({...
useId란서버와 클라이언트에서 동일한 ID를 생성하도록 보장하는 Hook이다.중요한 건랜덤 ID 생성 자체가 목적이 아니라,SSR hydration consistency를 보장하는 게 핵심이라는 점이다.왜 문제가 생길까SSR 환경에서는서버가 먼저 HTML 생성이후 클라이언트가 hydration을 수행한다.즉서버 렌더링클라이언트 렌더링이 두 번 발생한다.문제는 랜덤 ID다.랜덤 ID 문제예를 들어:const id = Math.random();서버:0.12345 클라이언트:0.98765 당연히 다르다.즉:서버 HTML...