리액트에서 비동기 함수를 비동기 콜백으로 전달할 수 있을까요?
리액트(React)를 사용하면서 상태를 관리할 때, 상태 업데이트 이후 비동기 함수를 호출해야하는 상황에 직면할 수 있습니다. 그런데 질문이 생깁니다: 리액트의 setState 메소드를 사용하여 비동기 함수를 콜백으로 전달할 수 있을까요?
답은, 네 가능합니다. 리액트는 콜백으로서 비동기 함수를 사용할 수 있도록 지원합니다. 이제 자세한 내용을 알아보고 어떻게 동작하는지 알아보겠습니다.
비동기 함수 이해하기
비동기 함수(async function)는 항상 Promise를 반환하는 특수한 종류의 함수입니다. 이를 통해 비동기 코드를 동기적으로 작성할 수 있습니다. 함수를 async로 선언하면 await 키워드를 사용하여 Promise가 해결되거나 거부될 때까지 함수 실행을 일시 중지할 수 있습니다. 이는 API 호출이나 데이터베이스 쿼리와 같은 비동기 작업을 더 직관적으로 처리할 수 있게 해줍니다.
setState에서 비동기 함수 콜백 사용하기
리액트의 setState 메소드는 컴포넌트의 상태를 업데이트하는데 사용됩니다. 첫 번째 매개변수로 새로운 상태 객체를 받고, 두 번째 매개변수로 선택적으로 콜백 함수를 전달할 수 있습니다. 비동기 함수를 콜백으로 전달해도 정상적으로 동작합니다.
setState({ foo: bar }, async () => {
await doStuff();
});
위 코드 스니펫에서는 상태를 업데이트하기 위해 새로운 상태 객체를 전달합니다. 그리고 화살표 함수 문법을 사용하여 비동기 콜백 함수를 정의합니다. 콜백 내부에서는 await 키워드를 사용하여 doStuff 함수의 완료를 기다릴 수 있습니다.
중요한 점은 setState의 콜백은 상태 업데이트가 완료될 때만 실행됩니다. 따라서 doStuff 함수는 상태 업데이트가 완료된 후에 실행되도록 보장됩니다. 이를 통해 setState가 콜백 내부의 비동기 함수 호출 전에 완료될 수 있다는 것을 알 수 있습니다.
실제 예제
이제 리액트의 라이프사이클 메소드인 componentDidMount에서 setState의 비동기 함수 콜백을 사용하는 실제 예제를 살펴보겠습니다:
async componentDidMount() {
await setStateAsync(newState); // setState의 비동기 버전
await doStuff();
}
위 예제에서는 async로 선언된 componentDidMount 라이프사이클 메소드를 정의합니다. 메소드 내부에서는 먼저 setStateAsync 함수의 완료를 기다린 후에(setState의 Promise를 반환하는 비동기 버전) doStuff 함수를 기다립니다.
결론
리액트에서 비동기 함수를 콜백으로 전달하는 것은 비동기 작업을 관리하기 위한 유효하고 편리한 접근 방식입니다. 상태 업데이트가 완료된 후에 비동기 콜백 내부의 비동기 함수를 호출하기 때문에 안심하고 사용할 수 있습니다. 비동기 작업 중 발생할 수 있는 오류를 적절한 에러 처리 기법으로 처리하는 것을 잊지 마세요.
비동기 함수의 강력한 기능을 활용하여 더 깨끗하고 가독성 있는 코드를 작성하고, 리액트 컴포넌트 내에서 비동기 작업 처리를 간편하게 할 수 있습니다.
reference :
