use

 

🎯 use란 무엇인가요?

**use**는 React에서 **Promise(비동기 작업)**를 더 간편하게 처리할 수 있도록 도와주는 기능이에요.
비동기 작업은 보통 데이터를 불러오거나 API 요청을 할 때 사용하죠.

 

🍕 비유로 이해하기: 피자 배달 이야기

여러분이 피자 가게에서 피자를 주문했다고 생각해 봐요. 🍕

1. 기존 방식
   • 피자가 완성될 때까지 계속 주방에 가서 "피자 다 됐나요?" 하고 물어보는 상황이에요.
   • 즉, 데이터를 기다리는 동안 계속 상태를 체크하고 추가 작업이 필요하죠.
2. use를 사용하면?
   • **use**는 피자가 완성될 때까지 알아서 기다려줍니다.
   • 주방에 물어보지 않아도 피자가 나오면 바로 가져다 줘요.
   • 즉, 데이터가 준비될 때까지 알아서 기다리고, 데이터가 준비되면 바로 사용할 수 있게 해주는 기능이에요.

 

🛠️ use 사용법

use는 **비동기 작업(Promise)**을 더 간단하게 처리하는 데 사용됩니다.
아래 예제를 통해 이해해 볼까요?

 

1. 기존 방식: 데이터 불러오기

React에서 데이터를 불러올 때 보통 useEffect와 useState를 사용했어요.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const result = await response.json();
    setData(result);
    setLoading(false);
  }

  if (loading) return <p>로딩 중...</p>;

  return <div>데이터: {data.title}</div>;
}

export default App;

설명:

• useState와 useEffect를 사용해서 데이터를 가져오고 로딩 상태를 체크해야 했어요.
• 코드가 복잡하고, 로딩 상태를 관리해야 하기 때문에 귀찮죠?

 

2. use를 사용해서 더 간단하게

React 18에서 **use**를 사용하면 이런 비동기 작업이 훨씬 간단해집니다.

import React, { use } from 'react';

const dataPromise = fetch('https://jsonplaceholder.typicode.com/posts/1').then((res) =>
  res.json()
);

function App() {
  const data = use(dataPromise); // use를 사용해 데이터를 가져옴

  return <div>데이터: {data.title}</div>;
}

export default App;

 

🔍 코드 설명

1. dataPromise
   • 데이터를 불러오는 Promise를 변수에 저장해요.
2. use를 사용
   • use(dataPromise)를 호출하면 React가 알아서 Promise가 완료될 때까지 기다렸다가 데이터를 반환해줍니다.
   • 더 이상 **useState**나 **useEffect**를 사용해서 로딩 상태를 관리할 필요가 없어요!
3. 결과
   • 데이터가 준비되면 바로 화면에 표시됩니다.

 

🚀 use를 사용하면 좋은 점

1. 코드가 간결해져요
   • useEffect와 useState로 복잡하게 작성할 필요가 없어요.
   • 데이터를 가져오는 코드가 한 줄로 깔끔해집니다.
2. 로딩 상태 관리가 필요 없어요
   • React가 Promise가 끝날 때까지 알아서 기다리기 때문에 로딩 상태를 따로 관리하지 않아도 돼요.
3. 비동기 작업을 더 직관적으로 처리
   • 데이터를 가져오는 작업이 동기 코드처럼 보이기 때문에 이해하기 쉽습니다.

 

⚠️ 주의할 점

1. React 18 이상에서만 사용 가능
   • use는 React 18 버전부터 사용할 수 있어요.
2. 서버 컴포넌트에서 주로 사용
   • 현재는 React의 **서버 컴포넌트(Server Component)**에서 주로 사용됩니다.
   • 클라이언트 컴포넌트에서는 아직 공식적으로 지원되지 않아요.
3. 오류 처리
   • Promise가 실패할 경우(예: 서버 오류) 에러 처리를 따로 해줘야 합니다.

 

🌟 한 줄 요약

**use**는 Promise가 완료될 때까지 기다려서 비동기 데이터를 더 간단하게 처리할 수 있도록 도와주는 React의 최신 기능이에요.

 

🎉 마무리

React의 **use**를 사용하면 데이터를 더 쉽게 가져오고, 코드도 간결하게 작성할 수 있어요.
하지만 아직 서버 컴포넌트에서 주로 사용되기 때문에, 앞으로 React 생태계에서 더욱 중요한 기능이 될 거예요. 😊