useEffect와 useLayoutEffect는 둘 다 React에서 사이드 이펙트(Side Effect)를 처리하기 위한 Hook이지만, 그 동작 시점과 목적이 조금 다르다. 이때 사이드 이펙트(Side Effect)란 리액트 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 대표적인 예시로, 어떤 데이터를 가져오기 위해 외부 API를 호출하는 경우, 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 먼저 렌더링을 하면서 API 응답이 늦어지거나 없을 경우에도 영향을 최소화할 수 있다. useEffect와 useLayoutEffect 두 Hook의 차이점을 이해하기 위해서는 렌더링 과정에서 언제 실행되는지와 그..
ASAC/Front-End 2024. 9. 22. 22:06
useEffect와 useLayoutEffect는 둘 다 React에서 사이드 이펙트(Side Effect)를 처리하기 위한 Hook이지만, 그 동작 시점과 목적이 조금 다르다. 이때 사이드 이펙트(Side Effect)란 리액트 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 대표적인 예시로, 어떤 데이터를 가져오기 위해 외부 API를 호출하는 경우, 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 먼저 렌더링을 하면서 API 응답이 늦어지거나 없을 경우에도 영향을 최소화할 수 있다. useEffect와 useLayoutEffect 두 Hook의 차이점을 이해하기 위해서는 렌더링 과정에서 언제 실행되는지와 그..