React Render 함수 내에서 Async Await를 직접 사용할 수 있나요?

React 렌더링 함수의 비동기 대기

문제:
React의 렌더링 함수에서 비동기 대기 기능을 사용하고 싶습니다. 백엔드 API에서 데이터 가져오기와 같은 비동기 작업을 수행하는 구성 요소입니다. 그러나 렌더링 함수 내에서 Wait 키워드가 인식되지 않는 문제가 발생합니다.

해결 방법:

클래스 구성 요소의 렌더링 메서드에서 async 키워드를 사용할 수 있습니다. , 성능 고려 사항으로 인해 권장되지 않습니다. 대신 데이터 가져오기와 표시를 두 개의 별도 구성 요소로 분리하는 것이 좋습니다.

상위 구성 요소(데이터 가져오기):

<code class="javascript">class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? <ChildComponent data={this.state.data} /> : null;
  }
}</code>

하위 구성 요소(데이터 표시):

<code class="javascript">const ChildComponent = ({ data }) => {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};</code>

설명:

• 상위 구성 요소 ParentComponent는 가져오기 기능을 사용하여 API에서 데이터 가져오기를 처리합니다.
• 데이터가 수신되면 데이터 상태를 설정하여 다시 렌더링을 시작합니다.
• 렌더링 메서드에서 상위 구성 요소는 상태에 데이터 속성이 있는지 확인합니다. 그렇다면 하위 구성 요소인 ChildComponent를 렌더링하고 가져온 데이터를 props로 전달합니다.
• ChildComponent는 테이블에 데이터를 표시하는 순수 기능 구성 요소입니다.

참고:

React 후크 기반 구성 요소의 경우 useEffect 후크를 사용하여 데이터를 가져오고 구성 요소 상태를 업데이트하여 데이터 가져오기 논리를 렌더링 함수에서 분리할 수 있습니다.

위 내용은 React Render 함수 내에서 Async Await를 직접 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!