API를 받아올때 useEffect를 쓰는 이유

안성현·2023년 5월 15일
2
post-custom-banner

프로젝트에서 마크업이 끝나고, API를 받아와야 할 상황이 생겼습니다.
그래서 문득 궁금해졌습니다...!!

왜 useEffect를 이용해서 데이터를 받아오는 걸까??

React에서 API를 받아오는 과정은 일반적으로 비동기적으로 이루어지며, 이에 대한 처리는 useEffect 훅을 사용합니다.

useEffect 훅은 컴포넌트가 렌더링될 때마다 실행되며, 첫 번째 인자로 전달된 함수는 비동기적으로 처리할 작업을 수행합니다. 이 함수는 렌더링 후에 최초 한 번만 실행되며, 두 번째 인자로 배열을 전달하면 해당 배열에 포함된 값이 변경될 때마다 함수가 실행됩니다.

따라서, useEffect를 사용하여 API를 받아오는 경우에는 다음과 같은 이유로 사용됩니다:

최초 로딩시에만 API를 호출하도록 보장합니다.
useEffect 훅은 컴포넌트가 최초로 마운트될 때에만 실행되므로, API를 최초 로딩시에만 호출하도록 보장할 수 있습니다.

비동기적으로 처리할 수 있도록 보장합니다.
API 호출은 일반적으로 비동기적으로 처리됩니다. useEffect 훅은 비동기적으로 실행되므로, API 호출과 같은 비동기적 작업을 처리하는 데 적합합니다.

상태를 업데이트할 수 있도록 보장합니다.
API에서 받아온 데이터를 상태로 업데이트하기 위해서는 useState 훅을 사용해야 합니다. useEffect 훅은 상태를 업데이트할 수 있는 함수를 반환하므로, API에서 받아온 데이터를 상태로 업데이트할 수 있습니다.

따라서, API를 받아올 때 useEffect 훅을 사용하는 것은 API 호출과 데이터 처리를 비동기적으로 처리하고, 상태를 업데이트할 수 있는 효율적인 방법입니다.

profile
깊이 있는 배움을 가진 개발자 안성현입니다
post-custom-banner

0개의 댓글