[Compose] LaunchedEffect와 DisposableEffect 그리고 React의 useEffect와 유사점

부트캠프에서 처음 프론트엔드 개발에 대해 배울때 가장 많이 접하는 라이브러리가 React일 것이다.
React로 개발을 하다보면 함수형 컴포넌트에서 사용하는 리액트 훅(ReactHook), 특히 useEffect를 자주 사용하게 된다.

안드로이드 앱 개발 프로젝트를 진행하면서,
리액트로 개발을 시작한 나에게 있어 객체지향형 프로그래밍이랑 너무나도 어려운 개념이었다.

그러다 선언형 프로그래밍이 가능한Jectpack Compose을 사용하게 되었고,
자연히 React의 useEffect와 비슷한 역할을 하는 함수에 대해 알아보았다.

- React, useEffect

React의 useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수다.
useEffect를 사용하여 비동기 작업을 수행하거나, 외부 리소스를 가져오거나, 구독을 설정하거나, 이벤트 리스너를 등록하는 등의 작업을 수행할 수 있다. useEffect 함수는 컴포넌트가 언마운트될 때 정리(clean-up) 함수를 반환할 수 있으며, 이를 통해 비동기 작업 및 이벤트 리스너 등을 해제할 수 있다.

- LaunchedEffect

JetpackCompose 에도 앞서 설명한 useEffect와 유사한 동작을 하는 함수로 LaunchedEffect가 있다.
LaunchedEffect는 Composable 함수 내부에서 비동기 작업을 수행하는 데 사용되며, 코루틴 스코프를 사용하여 실행된다.
useEffect 함수에서 대괄호([])에 의존성 변수를 할당하여 해당 변수의 값이 변할 때마다 내부 로직이 반복적으로 실행되는 것과 같이,
LaunchedEffect 또한 key에 할당된 변수의 값이 변할 때마다 내부 로직이 반복적으로 실행된다.
다만 차이가 있다면 useEffect는 정리 함수를 반환하여 해당 리소스를 해제할 수 있는 반면,
LaunchedEffect는 Composable 함수가 화면에서 사라질때 자동으로 정리된 다는 점이다.

- DisposableEffect

React의 useEffect가 수행하는 기능 중에 하나가 side effect 처리이다.
여기서 말하는 side effect란,
Componet가 렌더링될 때 외부 상태를 변경하거나, 외부 API 호출, 브라우저의 DOM 조작, 타이머 등의 작업을 수행하는 것을 말한다.

React에서는 컴포넌트의 상태(state)와 속성(props)이 변경될 때마다 렌더링이 다시 수행되는데, 이 때 useEffect를 사용하여 상태나 속성이 변경될 때마다 실행되는 부가적인 작업을 수행할 수 있다. 이러한 작업을 side effect라고 한다.

useEffect 함수를 사용하면 컴포넌트의 상태를 변경하거나, 외부 API 호출 등의 작업을 수행할 수 있습니다. 이 때 useEffect 함수에 전달된 함수가 effect 함수로서 실행되어 이러한 작업을 수행하게 된다.

Jetpack Compose에서 이와 비슷한 역할을 수행하는 함수가 바로 DisposableEffect라고 볼 수 있다.

React에서 useEffect 함수를 사용하는 방법과 Jetpack Compose에서 DisposableEffect 함수를 사용하는 방법은 약간의 차이가 있지만, 기본적인 개념은 동일하다. useEffect 함수는 컴포넌트가 처음 렌더링될 때와, 의존성 배열에 포함된 상태나 속성이 변경될 때마다 호출된다면, DisposableEffect 함수는 Composable 함수가 처음 실행될 때와 Composable 함수 내에서 사용된 변수 중에서 Key에 해당하는 변수가 변경될 때 호출된다.

따라서 React의 useEffect 함수와 Jetpack Compose의 DisposableEffect 함수는 모두 "side effect"를 처리하기 위한 함수로, 외부 상태를 변경하거나, 외부 API 호출 등의 작업을 수행한다.