React 렌더 함수에서 async/await를 사용하는 방법

React에서 렌더 함수는 일반적으로 순수 동기 작업을 위한 것입니다. 그러나 특정 시나리오에서는 이 기능 내에서 비동기 작업을 수행해야 할 수도 있습니다. 이 문서에서는 렌더링 함수에서 async/await 구문을 효과적으로 사용하는 방법을 설명합니다.

문제 이해

질문에서 강조된 것처럼 async/를 사용하려고 하면 render 함수의 map 함수 내에서 직접 wait를 사용하면 예기치 않은 동작이 발생할 수 있습니다. 이는 지도 함수가 동기 작업을 예상하고 그 안에서 비동기 호출을 수행하려고 시도하면 렌더링 프로세스의 흐름이 중단될 수 있기 때문입니다.

데이터 가져오기와 표시 분리

이 문제를 해결하려면 데이터 가져오기 프로세스를 표시 로직에서 분리하는 것이 좋습니다. 렌더링 함수 내에서 비동기 작업을 수행하는 대신 별도의 구성 요소나 후크에서 데이터 가져오기를 시작하는 것이 더 적절합니다.

상위 구성 요소에서 비동기 데이터 가져오기

이 접근 방식에서는 비동기 요청을 수행하고 데이터를 관리하는 상위 구성 요소(예: ParentThatFetches)를 만듭니다. 라이프사이클 메소드 또는 후크를 활용하여 상위 구성요소는 데이터를 가져와서 상태에 저장합니다. 그 후, 상위 구성 요소는 가져온 데이터를 props로 받는 순수 기능적 하위 구성 요소(예: Child)를 조건부로 렌더링합니다.

class ParentThatFetches extends React.Component {
생성자 () {

this.state = {};

}

comComponentDidMount () {

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

}

render () {

{this.state.data && (
  <Child data={this.state.data} />
)}

}
}

const 하위 = ({ 데이터 }) => (

{data.map((x, i) => (<td key={i}>{x}</td>))}

후크를 사용하여 데이터 가져오기

React에 후크가 등장하면 데이터 가져오기가 더욱 단순화될 수 있습니다. 다음 코드 조각은 후크를 사용하여 데이터를 비동기적으로 가져오고 이에 따라 상태를 업데이트하는 방법을 보여줍니다.

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

}, []);

데이터 반환 &&
}