React 렌더 함수에서 Async/Await 사용: 대체 접근 방식

비동기 프로그래밍은 React 애플리케이션에서 자주 발생하며, 특히 외부 작업을 처리할 때 더욱 그렇습니다. 데이터 소스. 그러나 React의 렌더링 함수 내에서 직접 async 및 wait를 사용하면 예상치 못한 결과가 발생할 수 있습니다.

React에 비동기 호출을 효과적으로 통합하기 위한 일반적인 접근 방식은 상태 관리 기술을 활용하는 것입니다. 여기에는 componentDidMount와 같은 별도의 수명 주기 메서드에서 데이터를 가져오거나 useEffect와 같은 후크를 사용하고 데이터를 사용할 수 있게 되면 상태를 업데이트하는 작업이 포함됩니다.

다음 예를 고려하세요.

class ParentThatFetches extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? (
      
    ) : null;
  }
}

const Child = ({ data }) => (
  
    {data.map((x, i) => (
      {x}
    ))}
  
);

이 접근 방식에서 ParentThatFetches 구성 요소는 데이터를 비동기식으로 가져오고 그에 따라 상태를 업데이트합니다. 데이터를 사용할 수 있게 되면 데이터를 표시하는 하위 구성 요소를 렌더링합니다.

대체 접근 방식: 서버 측 구성 요소

React 18에 도입된 React 서버 구성 요소 , React 애플리케이션에서 비동기 데이터를 처리하기 위한 또 다른 접근 방식을 제공합니다. 기존 클라이언트 측 렌더링 모델과 달리 React 서버 구성 요소는 서버에서 렌더링되므로 HTML이 클라이언트에 전송되기 전에 데이터를 가져와 처리할 수 있습니다.

다음은 React 서버 구성 요소를 활용하는 업데이트된 예입니다.

import Geocode from "react-geocode";
import _ from "lodash-es";

const getAddressData = async (getCompanyUserRidesData = []) =>
  Promise.all(
    getCompanyUserRidesData.map(async (userRides) => {
      const addr = await Geocode.fromLatLng(22.685131, 75.873468);
      const address = addr.results[0].formatted_address;
      const email = _.get(userRides, "driverId.email", "");
      const mobile = _.get(userRides, "driverId.mobile", "");
      return { address, email, mobile };
    })
  );

async function GeoServerComponent({ phase, getCompanyUserRidesData }) {
  const data = await getAddressData(getCompanyUserRidesData);
  return (
    
        {data.map(({ address, email, mobile }, index) => (
          
        ))}
      

      

            
{address}
            
Goa
            
asdsad
            
{email}
            
{mobile}
          
    
  );
}

이 예에서 getAddressData 함수는 서버에서 비동기적으로 주소를 가져옵니다. 그런 다음 GeoServerComponent 함수는 주소를 props로 수신하고 서버에 필요한 HTML을 렌더링합니다. 이 접근 방식을 사용하면 HTML이 클라이언트에 전송되기 전에 데이터가 준비되어 렌더링 기능에서 직접 비동기 및 대기를 사용할 때 발생하는 문제를 해결할 수 있습니다.