리액트 메이저 버전 업데이트 (2) - use

use는 프라미스를 동기적으로 읽을 수 있게 해주는 리액트 api이다.

이번 메이저 업데이트를 통해서 본 19 버전은 개발자의 개발 경험에 초점을 많이 맞춘 것 같다.

클래스형 개발에서 함수형 개발로 업데이트 한 것은 렌더링이 잦은 리액트에서 필수적이었다면

이번 메이저 업데이트는 필수적이지는 않지만, 기존에 개발을 하면서 번거로웠던 것들, 있으면 좋았던 것들이 많이 추가된 것 같다.

 

그 중에서 use 리액트 api의 경우에는, 개발자의 개발 경험에 대해서 가장 긍정적인 api가 아닐까 싶다.

 

들어가보자. 본 게시글은 하단의 포스트를 참조하였습니다. 

 

use는 다음과 같이 사용한다.

import {use} from 'react'

function MessageComponent({messagePromise}){
	const message = use(messagePromise);
    const theme = use(messagePromise);
    ....
}

 

일단 줄여서 이야기 한다면, 우리가 데이터를 가져올 때 비동기식으로 가져와야했다.

때문에 그걸 감싸는 함수 자체가 비동기가 되어야 했는데, use는 동기적으로 프라미스를 가져올 수 있도록 한다. 

 

기존 리액트 훅들은 루프 및 조건문 내에서 호출할 수 없었다. 

만일 그렇게 하면 "리액트 훅들은 최상위에서만 쓸 수 있다" 막 이런다.

 

그러나, use는 루프 및 조건문 내에서 호출할 수 있다.

호출하는 함수는 "컴포넌트" 이거나 "훅"이어야 한다.

 

 

use는 Suspense와 ErrorBoundary와 같이 쓰면 좋다고 한다. 

use에 전달된 프라미스가 보류 중인 동안에 Suspense의 fallback 요소가 보여지게 된다. 

Promise가 resolve 되면 Suspense fallback은 api에서 반환된 데이터에 기반한 새로운 UI로 렌더링 되게 된다.

만약에 reject 되게 된다면 ErrorBoundary의 fallback 요소가 보여진다.

코드로 보면 다음과 같다.

<ErrorBoundary fallback={use가 사용하는 프라미스가 reject 되었을 때 보여지는 요소}>
	<Suspense fallback={resolve 되었을 때 보여지는 요소}>
    	<use를 사용하는 컴포넌트/>
    </Suspense>
</ErrorBoundary>

 

 

조건문과 루프로 호출이 가능하다. 이렇게

function HorizontalRule({show}){
	if(show){
    	const theme = use(ThemeContext);
        return <hr className={theme} />;
    }
    return false;
}

 

더 자세한 예시를 살펴보자. 

import {createContext, use} from 'react';

const ThemeContext = createContext(null);

export default function MyApp(){
	return(
    	<ThemeContext.Provider value="dark">
        	<Form/>
        </ThemeContext.Provider>
    );
}

function Form(){
	return(
    	<Panel title="Welcome">
        	<Button show={true}>Sign Up</Button>
            <Button show={false}>Log in</Button>
        </Panel>
    );
}

function Panel({title, children}){
	const theme = use(ThemeContext);
    const className = `panel-${theme}`;
    
    return (
    	<section className={className}>
        	<h1>{title}</h1>
            {children}
        </section>
    );
}

function Button({show, children}){
	if(show){
    	const theme = use(ThemeContext);
        const className = `button - ${theme}`;
        
        return (
        	<button className={className}>
            	{children}
            </button>
        );
    }
    return false; // 하지만 return null 이 맞는게 아닌가 싶기도 하다. 
}

 

 

 

개인적으로 제일 크게 바뀌었다고 생각하는 부분인데

데이터를 서버에서 가져올 때 해야하는 작업들이 몇가지가 있다.

 

1. 데이터 페칭, 예외처리

2. 상태업데이트

3. 데이터 페칭에 들어가는 프라미스가 resolve/reject 됨에 따라서 보여줄 UI나 동작 처리

 

근데 코드를 쪼개버리면 된다 라고 하면 뭐 할말은 크게 없지만, 그냥 편하게 쭉 코드를 작성했을 경우에

한 코드에 다 넣어버렸다. 

 

하지만 이제 위와 같은 과정을 그냥

ErrorBoundary - fallback

    ㄴ Suspense - fallback

          ㄴ Component - use(Promise)

 

이렇게 처리를 하고 fallback은 따로 컴포넌트로 재사용가능하게 빼면된다.

구조화가 잘되었고, 깔끔하다. 

 

 

 

 

 

 

 

 

 

참고한 포스팅

https://react.dev

React

use 훅이 바꿀 리액트 비동기 처리의 미래 맛보기(1) | 요즘IT

use 훅이 바꿀 리액트 비동기 처리의 미래 맛보기(1) | 요즘IT