[TIL/React] 2023/03/11

useEffect에 대한 개념 정리가 잘 되어있지 않다고 판단해서 오늘은 'useEffect' 한 놈만 팼다.

useEffect!

'useEffect'는, 함수형 컴포넌트에서 'side-effect'를 수행하기 위한 'Hook'이다. 그렇다면 'side-effect'라는 것은 대체 무엇일까?

'side-effect'는 단순히 컴포넌트가 렌더링 된 결과물을 생성하는 것이 아니라, 컴포넌트 외부의 다른 상태를 변경하거나 다른 외부 동작을 수행하는 것을 말한다.

공식 문서에서는, 컴포넌트가 때로는 network와 연결되어야 하거나 API를 호출하는 경우가 있을 수 있는데, 이러한 system은 React에 의해 직접 control 되는 것은 아니기 때문에 'external'이라고 명명한다고 언급되어 있다. side-effect가 곧 외부적인 작업을 의미하는 것이다.

useEffect의 첫 번째 매개 변수로 전달되는 '함수'는 'effect 함수'라고도하며, 이 함수는 렌더링 이후에 수행할 작업을 정의한다.

두 번째 매개 변수로 전달되는 배열은 '의존성 배열'이다. 이 배열은 'effect 함수'가 실행되어야하는 '조건'을 정의한다. 의존성 배열이 '빈 배열'이면 effect 함수는 한 번만 실행된다. 배열에 '값이 있으면' 배열에 지정된 값이 변경될 때마다 effect 함수가 실행된다.

React는 필요할 때마다(setup과 cleanup 함수를) 호출하며, 이는 다음과 같은 경우에 여러 번 발생할 수 있다.

1. 컴포넌트가 페이지에 추가될 때 'setup 코드'가 실행된다.(Mount). 2. 의존성 배열의 값이 변경되어 컴포넌트가 리렌더링 된 후: 2-1. 먼저 이전의 props와 state를 사용하여 cleanup 코드가 실행된다. 2-2. 그 다음, 새로운 props와 state를 사용하여 setup 코드가 실행된다. 3. 컴포넌트가 페이지에서 제거될 때(unmounts), 마지막으로 cleanup 코드가 한 번 실행된다.

useEffect? Lifecycle?

useEffect는 React의 라이프사이클 이벤트에 비유하여 설명할 수 있다.

컴포넌트가 Mount될 때, useEffect의 첫 번째 매개변수로 전달된 함수는 componentDidMount에 해당한다. 이 함수는 컴포넌트가 처음으로 렌더링된 후에 한 번 실행된다.

컴포넌트가 Update될 때, useEffect의 첫 번째 매개변수로 전달된 함수는 componentDidUpdate와 비슷한 역할을 한다. useEffect는 컴포넌트의 상태나 프로퍼티에 의존하는 코드를 포함할 수 있는데, 이를 "의존성(dependency)"이라고 한다. 의존성이 변경되면 useEffect는 다시 실행된다. 이때 이전에 실행되었던 함수에서 반환한 cleanup 함수가 호출된다. 그리고 의존성이 변경된 이후에 새로운 함수가 다시 실행된다.

마지막으로, 컴포넌트가 Unmount될 때 useEffect의 '반환 함수'는 componentWillUnmount와 비슷한 역할을 한다. 반환된 함수는 컴포넌트가 제거되기 전에 실행된다. 이 함수는 useEffect에서 설정한 작업(예: 타이머나 구독 취소 등)을 정리하고 해제하는 데 사용된다.