웹 개발에서 살아남기

'React Forget'이라는 프로젝트명으로 알려졌던 React Compiler가 드디어 베일을 벗었습니다. 자동 메모이제이션을 통해 useMemo, useCallback, 의존성 배열 관리의 고통에서 해방시켜 주는 이 기술의 원리와 적용 방법을 정리했습니다. React Compiler: useMemo, 이제 진짜 안 써도 될까?React 개발자들을 가장 괴롭히는 건 아마 리렌더링 최적화와 의존성 배열(Dependency Array) 관리일 겁니다. useMemo, useCallback을 남발하다 보면 코드는 지저분해지고, 하나라도 빼먹으면 불필요한 렌더링이 발생하거나 로직이 꼬이게 되죠.버그가 발생하다 보면 "그럼 처음부터 useCallback을 빼고 로직을 작성하자" 싶다가도, 나중에 성능 문제가 ..

React 19부터는 forwardRef 없이 컴포넌트에 ref를 직접 넘길 수 있습니다. 달라진 ref 전달 방식과 제네릭 컴포넌트 타이핑, 그리고 useImperativeHandle을 활용해 부모에게 커스텀 메서드를 노출하는 방법까지 한 번에 정리했습니다. 이제 forwardRef는 안녕? React 19에서 ref 다루기React로 재사용 가능한 컴포넌트를 만들 때 가장 번거로웠던 것 중 하나가 바로 ref 처리였습니다. 고작 DOM 접근 권한 하나 넘겨주자고 forwardRef로 감싸고, 디버깅용 이름(displayName)을 따로 적어주는 과정은 꽤나 비효율적이었죠.React 19에서는 이 구조가 완전히 개편되었습니다. 이제 ref도 className처럼 그냥 prop으로 넘기면 됩니다. 자식 ..