[javascript] 리액트 훅에서 비동기 처리 방법
리액트는 훅(Hook)을 사용하여 함수 컴포넌트에서 상태값을 추가하고 다양한 작업을 수행할 수 있습니다. 그러나 비동기 처리를 수행할 경우에는 몇 가지 주의할 점이 있습니다. 이 글에서는 리액트 훅에서 비동기 처리를 하는 방법을 다뤄보겠습니다.
1. useEffect 훅을 활용한 비동기 처리
useEffect 훅은 리액트 컴포넌트가 렌더링된 이후에 특정 작업을 수행할 수 있도록 하는데에 사용됩니다. 이를 통해 비동기 작업을 처리할 수 있습니다.
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await fetch('https://example.com/data');
const json = await result.json();
setData(json);
};
fetchData();
}, []);
return <div>{data && data.message}</div>;
}
위의 예제 코드에서 useEffect 안에서 비동기 함수를 작성하고, 해당 함수를 호출함으로써 데이터를 가져와 상태를 업데이트합니다.
2. useState와 useEffect 훅을 조합한 비동기 처리
useState로 상태를 설정하고, useEffect에서 상태를 감시하여 비동기 처리를 수행하는 방법도 있습니다.
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const result = await fetch('https://example.com/data');
const json = await result.json();
setData(json);
};
fetchData();
}, []);
return <div>{data && data.message}</div>;
}
이 방법은 useEffect 훅을 사용하여 비동기 작업을 수행하는 것과 유사하지만, 렌더링 로직을 더 분리하여 작성할 수 있습니다.
결론
리액트 훅을 사용할 때에도 비동기 처리를 위한 다양한 방법을 활용할 수 있습니다. useEffect와 useState를 조합하여 비동기 처리를 하는 방식이 일반적으로 많이 사용되며, 각각의 상황에 맞게 적절한 방법을 선택하여 사용할 수 있습니다.
React 공식 문서 에서 더 많은 정보를 확인할 수 있습니다.