useEffect에서 왜 return이 바로 안되는 지 궁금했던 나

useEffect는 리액트를 배우게 되면 보통 두번째로 먼저 배우는 훅이다. 첫 번째는 당연 useState일거고 그런데, 갑자기 늘 함수에서 바로 return값이 주어졌던 경험에 비춰 useEffect를 봤더니 아니 왜 return이 자동으로 작동을 안할까라는 의문이 들었다. 물론, 우리는 추측을 할 수 있다. 어떤 로직에 의해서 return 값을 뱉는 것이 제어되고 있을거라는 추측말이다.
하지만, 리액트 초보로서 한 번 리액트의 전반에 대해 알아볼겸 파보았다.

useEffect(() => {
	console.log("I am the effect");
	return () => {
		console.log("I run after re-render, but before the next UseEffect")
	}
})

먼저는 나는 리액트 개초보이기 때문에 리액트 라이프 사이클부터 알아보았다. useEffect를 제대로 이해하려면 넓게는 리액트를 제대로 이해하려면 무조건 알아야한다. (라고 생각했다.)

 

리액트 라이프 사이클을 찾아보면 무조건 보게되는 그림이다. 

**1. 마운트(Mounting) 단계:**
마운트 단계는 컴포넌트가 생성되고 DOM에 삽입될 때 발생합니다.

- `constructor(props)`: 컴포넌트의 생성자로, 초기 상태를 설정하거나 메서드를 바인딩할 때 사용됩니다.
- `render()`: 컴포넌트의 UI를 렌더링하는 메서드입니다.
- `componentDidMount()`: 컴포넌트가 DOM에 삽입된 후 실행되는 메서드로, 네트워크 요청이나 데이터 초기화와 같은 부수 효과를 수행합니다.

**2. 업데이트(Updating) 단계:**
업데이트 단계는 컴포넌트의 상태나 프롭스가 변경되었을 때 발생합니다.

- `shouldComponentUpdate(nextProps, nextState)`: 컴포넌트가 업데이트되기 전에 호출되며, 새로운 상태나 프롭스가 적용될 때 업데이트를 할지 말지를 결정하는 로직을 구현할 수 있습니다.
- `componentDidUpdate(prevProps, prevState)`: 컴포넌트가 업데이트된 후 실행되는 메서드로, 이전 프롭스나 상태와 현재 프롭스나 상태를 비교하여 필요한 작업을 수행합니다.

**3. 언마운트(Unmounting) 단계:**
언마운트 단계는 컴포넌트가 DOM에서 제거되기 전에 발생합니다.

- `componentWillUnmount()`: 컴포넌트가 DOM에서 제거되기 전에 실행되는 메서드로, 타이머 제거나 구독 해제와 같은 정리 작업을 수행합니다.

**4. 오류(Error) 처리 단계:**
컴포넌트 렌더링 과정에서 에러가 발생한 경우에 호출됩니다.

- `componentDidCatch(error, info)`: 자식 컴포넌트의 렌더링 도중에 에러가 발생한 경우 실행되며, 에러 정보를 처리하는 로직을 구현할 수 있습니다.

리액트 17 버전부터는 더 이상 `componentWillUnmount`, `componentDidCatch` 등의 메서드를 사용하지 않아도 됩니다. 대신, 클래스 컴포넌트의 생명주기 대신 `useEffect` 훅을 사용하는 함수형 컴포넌트로 전환하는 것을 권장합니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

 

라고 gpt가 친절하게 설명해주었는데, 뭔가 조금 더 들어보고 싶어서 

여기 설명을 더 들어봤다.

 

1. 함수를 실행한다. 

2. 실행한 함수는 return 값 렌더링한다.

3. 렌더링한 것을 가상돔에 그린다.

4. 가상 돔과 돔을 비교한다.

5. 다른 부분이 있다면 돔에 업데이트를 한다.

6. useEffect, useLayoutEffect를 실행한다. (여기까지가 마운트 단계)

7. useEffect, useLayoutEffect에 의해 props나 state 값이 변경된다면 가상돔은 이 값들에 맞춰 다시 그린다.

8. 가상돔과 돔을 비교한다. 

9. 다른 부분이 있다면 그 부분을 돔에 업데이트한다. (만약 값이 변경되어도 ui상 변경 사항이 없다면 업데이트 하지 않는다.) 

10. 훅을 다시 실행한다. (여기까지가 업데이트 단계)

11. cleanup 함수를 실행한다. 

12. 컴포넌트가 소멸된다.

다짜고짜 React 코드를 까보았다. 알아먹을 수가 없어 이 영상을 보았다. 

 

 

보고나니 이 글 하나로 다 정리할 수는 없을 것 같다. 이 글은 생명주기를 이해한 것으로 만족한다.