React에서 비동기작업을 컴포넌트 로딩 전에 하면 useEffect를 사용하지 않아도 될 것 같은데, 왜 useEffect를 사용해서 처리하는걸까 ?

useEffect?

우선 useEffect가 어떤 역할을 하는지부터 알아보겠습니다.

useEffect는 React에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다.
사이드 이펙트는 데이터 패칭, DOM 업데이트, 타이머 설정 등과 같이 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 말합니다.

 

useEffect의 주요 역할은 다음과 같습니다:

1. 컴포넌트 마운트 및 업데이트 시 작업 수행
2. 컴포넌트 언마운트 및 업데이트 시 작업 수행: 컴포넌트가 언마운트될 때나 업데이트 전에 이전 사이드 이펙트를 정리(cleanup)하는 작업을 수행합니다.
3. 종속성 배열: 두 번째 인자로 전달하는 배열을 통해 전달된 변수의 배열값이 변경될 때마다 실행하여, 사이드이펙트를 관리할 수 있습니다.

React에서 초기에 데이터를 셋팅하지 않고 useEffect등을 통해서 데이터를 셋팅하는 이유가 뭘까 ? 

 

이번에는 오늘의 메인 주제에 대해서 알아보겠습니다.

React에서 초기 데이터를 설정하지 않고 useEffect를 통해 데이터를 셋팅하는 이유는 주로 다음과 같습니다:

1. 비동기 작업: 컴포넌트의 초기 렌더링과 데이터 로딩을 분리하는 작업을 수행합니다. 데이터를 외부 API로 호출하거나, 서버에서 가져오는 경우, useEffect를 사용하여 컴포넌트가 마운트된 후에 데이터를 가져오도록 설정할 수 있습니다.
2. 상태 업데이트 로직: 컴포넌트의 라이프사이클에 따라 특정 시점에서 상태를 업데이트할 수 있도록 합니다. 예를 들어, 컴포넌트가 처음 마운트될 때만 데이터 가져오기를 수행하거나 변수의 값이 변경되었을 때 데이터를 새로 가져올 수 있습니다.
3. 성능 최적화: useEffect의 의존성 배열을 활용하여 특정 상태나 props가 변경될 때만 데이터를 가져오는 방식으로 디펜던시를 관리할 수 있습니다. 이를 통해 불필요한 렌더링을 줄이고 성능을 최적화할 수 있습니다.

결론적으로, useEffect를 통해 데이터를 설정하면 데이터 로딩과 상태 업데이트를 더 유연하게 관리할 수 있으며, 초기 렌더링과 비즈니스 로직을 분리하는 데 유리합니다.

 

그렇다면 비동기작업을 컴포넌트 로딩 전에 하면 useEffect를 사용하지 않아도 될 것 같은데, 왜 useEffect를 사용해서 처리하는걸까 ? 

비동기 작업을 컴포넌트 로딩 전에 하는 것과 useEffect를 사용하는 것 사이의 차이점은 컴포넌트의 라이프사이클과 상태 관리에 있습니다. 

1. 컴포넌트 상태와 렌더링 관리: useEffect는 컴포넌트가 렌더링된 후 실행됩니다. 컴포넌트의 초기 렌더링이 완료된 후에 비동기 작업을 수행된다는 것이죠. 만약 비동기 작업이 컴포넌트가 마운트되기 전에 완료되면, 컴포넌트에 데이터가 제대로 바인딩 되지 않아 완성되지 않은 UI가 나타날 수 있습니다. 제대로 된 값으로 표현하기 위해 렌더링을 다시 시도해야 할 수도 있는거죠. 
2. 비동기 작업과 상태의 동기화: 비동기 작업을 컴포넌트 로딩 전에 처리하면, 데이터가 준비되기 전에는 컴포넌트가 초기 상태로 렌더링될 수 있습니다. useEffect를 사용하면 비동기 작업이 완료된 후 상태를 업데이트하여 컴포넌트의 상태와 UI를 동기화할 수 있습니다. 이렇게 하면 데이터 로딩 중에는 로딩 상태를 표시하거나 빈 상태로 렌더링하는 등의 처리가 가능합니다. (이전 포스팅에서 작성했던 Suspense를 활용하는 것도 이런 목적입니다.) 
   2024.07.19 - [FrontEnd/React] - Missing Suspense boundary with useSearchParams

 

useEffect를 사용하지 않는다면?

useEffect를 사용하지 않고 데이터를 설정하거나 비동기 작업을 처리하는 경우 다음과 같은 문제가 생길 수 있습니다.

1. 상태와 비동기 작업의 비동기화: 컴포넌트가 마운트되기 전에 비동기 작업을 수행하면, 상태와 UI의 동기화가 어려워집니다. 비동기 작업이 완료되기 전까지 상태가 업데이트되지 않으면, 컴포넌트는 의도하지 않은 결과를 보여줄 수 있습니다. 컴포넌트를 제대로 표시하기 위해서 별도의 상태관리 로직을 추가해야하고, 이로 인해서 코드의 복잡도가 올라가게 됩니다. 
2. 컴포넌트 라이프사이클 관리의 어려움: useEffect를 사용하지 않으면, 컴포넌트의 마운트, 업데이트, 언마운트 시점을 정확히 관리하기 어려워집니다. 예를 들어, 컴포넌트가 언마운트되기 전에 비동기 작업을 정리(cleanup)하거나 취소해야 하는 경우, 컴포넌트가 언마운트되는 시점을 판단하고, 클린업 하는 코드를 별도로 작성해야 합니다. 코드의 유지보수성이 떨어지게 되는 것이죠. 
3. 성능 최적화의 어려움: useEffect의 의존성 배열을 사용하면 특정 상태나 props가 변경될 때만 비동기 작업을 수행할 수 있지만, 이를 사용하지 않으면 이러한 최적화가 어렵습니다. 결과적으로 불필요한 비동기 작업을 하는 코드를 생성해야 하고, 이 코드들로 인해서 애플리케이션의 전체적인 성능이 떨어지게 됩니다. 

결론 

react에서 useEffect 훅을 사용하는 이유는 컴포넌트의 렌더링을 제어하고,
사용자에게 더 최적화된 UI를 제공하기 위한 것이라 볼 수 있겠습니다. 

Missing Suspense boundary with useSearchParams