제목: React Hooks를 사용하여 동기적인 부작용 처리하는 방법

React에서 새로운 context + hooks로 애플리케이션을 리덕스에서 다시 작성할 때, 서로 종속적인 동기적인 부작용 처리에 어려움을 겪을 수 있습니다. 이전 리덕스 애플리케이션에서는 리덕스 사가나 Thunk와 같은 라이브러리를 통해 동기적/연결된 액션과 API 요청을 처리했을 가능성이 높습니다.

이 설정에서 일반적인 시나리오는 첫 번째 API 요청의 응답이 반환되고 해당 데이터가 다음 API 요청에 사용되는 경우입니다. 이 블로그 포스트에서는 이 문제를 해결하고 React hooks를 사용하여 우아한 해결책을 찾는 방법을 알아보겠습니다.

Custom Hooks와 useEffect의 문제

제시된 코드를 살펴보면 custom hook인 “useFetch”를 생성했습니다. 그러나 React에서의 “hooks의 규칙” 때문에 custom hook을 useEffect hook 내에서 사용할 수 없습니다.

그러면 데이터 가져오기에 custom hook을 사용하는 경우 첫 번째 요청의 응답이 확보되기 전에 다음 요청을 기다려야 하는 방법은 어떻게 될까요? custom hook을 버리고 바닐라 fetch 요청을 사용하더라도 많은 useEffect hooks로 인해 복잡한 혼란스러운 코드가 될 수 있습니다.

보다 우아한 해결책

다행히도, React hooks를 사용하여 이러한 시나리오를 처리하는 더 우아한 방법이 존재합니다. 수정된 코드를 살펴보겠습니다:

“`jsx
const useFetch = (url, delay = 0) => {
const [data, setData] = useState(null);

useEffect(() => {
const fetchData = async () => {
const response = await import(url);
setTimeout(function() {
setData(response);
}, delay);
};

fetchData();
}, [url]);

return data;
};

function App() {
const personData = useFetch(“./person.json”, 5000);
const jobData = useFetch(“./job.json”, 3000);
const colleguesData = useFetch(“./collegues.json”, 1000);

console.log(personData);
console.log(jobData);
console.log(colleguesData);

return (

);
}
“`

이 업데이트된 코드에서는 useFetch hook을 단순화하고 useEffect hook을 사용하여 비동기 데이터 가져오기를 처리했습니다. 각 useFetch 호출은 특정 URL에서 데이터를 가져오며, 선택적인 딜레이를 설정할 수 있습니다. 가져온 데이터는 useState hook을 사용하여 상태에 저장되고 추가적으로 사용하기 위해 반환됩니다.

React hooks를 활용하여 각 구성 요소 내에서 상태를 관리함으로써, 이전 요청이 성공적으로 완료된 후에 이어지는 API 요청이 수행될 수 있도록 보장할 수 있습니다. 이를 통해 동기적인 부작용 처리에 대해 더 간결하고 효율적인 접근 방식을 제공할 수 있습니다.

Context와 Hooks의 미래를 고려

Context + hooks가 리덕스 사가나 Thunks와 같은 라이브러리와 동작 처리 측면에서 경쟁하기 충분히 성숙한지 궁금할 수 있습니다. 애플리케이션의 복잡성과 구체적인 요구 사항에 따라 달라지지만, React hooks는 상태와 비동기 작업을 관리하는 더 가벼운 우아한 대안을 제공합니다.

React hooks는 지속적으로 발전하고 인기를 얻으면서, 커뮤니티는 복잡한 시나리오를 처리하기 위한 라이브러리와 패턴을 개발하고 있습니다. react-hooks-async와 같은 라이브러리는 hooks를 사용하여 비동기 작업 처리에 필요한 추가 유틸리티를 제공합니다.

전반적으로, context + hooks는 올바르게 사용하고 기능을 제대로 이해하는 것이 중요한 경우에 애플리케이션의 부작용을 관리하는 강력한 도구가 될 수 있습니다. 최상의 접근 방식을 결정하기 전에 애플리케이션의 구체적인 요구 사항과 복잡성을 고려하는 것이 항상 중요합니다.

결론적으로, React hooks를 사용하여 서로 종속적인 동기적인 부작용을 처리하는 방법에 대해 살펴보았습니다. useEffect hook과 useFetch와 같은 custom hook을 활용하여 API 요청을 우아하게 관리하고 연결할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 희생하지 않고 API 요청을 체인으로 실행할 수 있습니다.

항상 애플리케이션의 구체적인 요구 사항을 분석하고 요구 사항에 가장 적합한 접근 방식을 선택하는 것을 기억하세요. 계속해서 발전하는 React hooks의 변화하는 환경을 탐구하고 개발 프로세스를 단순화하고 향상시킬 수 있는 새로운 라이브러리와 패턴을 알아보세요.

참고 자료 : 

reactjs