React 19.2 use() 훅 실전 패턴

use()는 Promise나 Context를 컴포넌트 본문에서 직접 읽는 새 훅이다. useEffect + useState로 로딩 상태를 수동으로 관리하던 보일러플레이트를 상당 부분 걷어낸다.

기존에는 데이터를 가져오려면 상태 세 개(데이터·로딩·에러)를 두고 effect 안에서 갱신해야 했다. use()는 Promise를 그대로 넘기면 Suspense가 로딩을, 에러 바운더리가 에러를 대신 처리한다.

주의할 점은 use()에 넘기는 Promise를 렌더링마다 새로 만들면 안 된다는 것이다. 서버 컴포넌트에서 만든 Promise를 props로 내려보내거나, 캐시된 Promise를 넘겨야 무한 루프를 피할 수 있다.

조건부로 호출할 수 있다는 점도 기존 훅과 다르다. if 문 안에서도 use()를 부를 수 있어, 데이터 의존이 분기되는 UI를 더 자연스럽게 표현한다.