useState vs useEffect 활용관련 문의

useState는 componet의 구성요소의 상태값일 관리하고

상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다.

반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다.

mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등)
update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다.

질문)

실무에서 useEffect의 어떻게 활용하나요?

지금은 hook을 배우는 단계라 실무에서 어떻게

사용될지도 많이 궁금합니다.

안녕하세요 이정환입니다.

강의에서 말씀드렸듯 useEffect는 컴포넌트의 사이드이펙트를 관리할 목적으로 제공됩니다.
(그래서 이름도 사이드 이펙트에서 따와 useEffect라고 지어지게 된 것 같습니다. )

컴포넌트의 사이드이펙트(부수 효과)란 컴포넌트의 주요한 목적과는 무관하게 발생해야 하는 일을 말합니다. 이때 컴포넌트의 주요 목적은 "UI를 화면에 렌더링" 하는 일 이므로, 이러한 렌더링 작업 외의 다음 작업들은 부수효과 즉 사이드 이펙트라고 말 할 수 있습니다.

결론적으로 useEffect는 특정 컴포넌트의 사이드이펙트(부수효과)를 관리하기 위해 제공되며, 이러한 사이드이펙트에는 위에 언급한 사항들이 있습니다.

실무에서는 보통 서버로부터 데이터를 불러올 때에 useEffect를 주로 활용합니다. 구체적으로는 의존성 배열인 deps를 빈 배열로 전달하여 컴포넌트 Mount 시점에 데이터를 불러오는 식 입니다. 또는 특정 스크립트를 실행하기 위해 사용되기도 합니다.

관련해서 읽어보시면 좋을 아티클도 함께 첨부드립니다.

인프런 커뮤니티 질문&답변