[React] 새로운 훅을 미리 학습하기 "use"

React 에서는 의견을 공유하는 https://github.com/reactjs/rfcs 라는 github repo 가 있다.

여기서 React 팀이 React core에 추가하려는 새로운 기능에 대해 토론하고 아이디어를 공유한다.

현재 use 라는 새로운 hook 에 많은 기대를 가지고 있다.

https://github.com/reactjs/rfcs/pull/229 이곳에서 개발자들이 직접 사용해보며

발생하는 이슈에 대해 토론을 나누고 있다.

저 토론 글의 제목은 "Promise와 async / await에 대한 최고의 지원" 이라고 한다.

아직까지는 canary 와 experimental 모드에서만 사용이 가능하다.

언제 쯤 머지가 될지는 모르겠지만 미리 익혀두면 좋을 것 같아서 정리 해 보려 한다.

 

| expermental 모드 세팅

# 1. vite 로 React 프로젝트 생성
yarn create vite

# 2. experimental 구성요소 설치
yarn add react@experimental react-dom@experimental

// 3. experimental 세팅
// tsconfig.json
"compilerOptions": {
  // ... other configs 
  "types": ["react/experimental"]
}

| use 는 무엇인가?

use 훅은 rfc에서는 await이라고 비유했다.

React에서 Server Component가 등장 하고 나서 서버의 직접 접근하여 데이터를 불러올 수 있게 되었다.

Server Component 에서는 상태를 저장 할 수 없이 제한적으로 사용이 가능했다.

그리고 서버에서 사용되는 함수형 컴포넌트에 async 사용이 가능해졌다.

Client Component 에서의 비동기 처리는 useEffect 내에 비동기 함수를 선언하여 실행하는 것이 전부였다.

그로 인해 기술적 한계가 발생했고 Client Component가 async 하기 위해 use 라는 훅을 React는 개발하고 있다.

 

| 왜 이름이 use 일까?

use 훅의 가장 큰 특징은 조건부 호출이 될 수 있기 때문에 다른 hook들과 차별점을 주기 위해서 라고 한다.

또한 Promise가 아닌 다양한 타입이 될 수도 있기 때문이다.

 

| 코드

App.tsx 의 Suspense

use hook 사용 코드

| 사용 후기

사용을 해 보았을 때 느꼈던 점은

useState의 사용성이 조금이나마 줄어들것 이라고 생각한다.

또한 Effect의 사용도 줄어들 것 같다.

지금까지는 Suspense를 사용하려면 recoil, react-query 등 다른 라이브러리에 의존해야 했다.

use 훅을 사용하면 비동기 함수를 호출 할 수 있고 비동기 함수의 return 값을 suspense 처럼 이미 로딩된 데이터로 사용할 수 있다.

 

| 개선 해야 할 점

커뮤니티에서는 아직까지 pending / rejected의 상태를 컨트롤 할 수 있는 기능을 추가 할 지 고민 하고 있다.

React는 프레임워크가 아닌 라이브러리라고 불리는 만큼 복잡성을 불러올 수 있다는 점 이다.

또한 여러가지의 제약조건이 있다.

나 또한 아직 제약조건을 찾아보고 있는 중이고 이해가 완벽하지 않은 상태라서 이 글에 정리는 따로 하지 않았다.