useEffect로 Side Effect 다루기

React Udemy 강의 178번 정리

이번 강의의 핵심은 한 가지,
"렌더링 중에 state를 바꾸면 왜 문제가 생기고, 그걸 useEffect로 어떻게 해결할까?"

1. 문제가 뭐였을까? (무한 루프)

사용자 위치를 가져와서 그 위치를 기준으로 장소 목록을 정렬. 그리고 그 결과를 state에 저장.

문제 코드의 핵심 구조

// 컴포넌트 함수 안
setAvailablePlaces(sortedPlaces);

이 코드가 컴포넌트 실행 중에 바로 실행됨.

왜 문제일까?

1. 컴포넌트 실행함
2. state 업데이트
3. state가 바뀌어서 컴포넌트 재실행
4. 다시 state 업데이트
5. 무한 반복..

즉, 렌더링 중에 side effect(state 변경)를 실행함.

2. Side Effect란?

렌더링과 직접적인 관련이 없는 작업을 말한다.

예를 들면, 데이터 fetch, 브라우저 API 사용(위치, localStorage 등), 타이머, interval 등등.

이런 작업은 렌더링 도중에 하면 안 됨.

3. useEffect는 언제 실행될까?

useEffect(() => {
  // side effect 코드
}, []);

useEffect 안의 코드는 컴포넌트가 렌더링된 이후에 실행됨.

즉, 렌더링 완료 후.
그래서 렌더링 중에 state를 바꾸는 문제가 사라짐.

4. 왜 의존성 배열([])이 중요할까?

useEffect(() => {
  // 위치 가져오고 state 업데이트
}, []);

의존성 배열의 의미

의존성 배열	실행 시점
생략	모든 렌더링 후마다 실행
[ ]	최초 렌더링 후 1번만 실행
[value]	value가 바뀔 때만 실행

이번 예제에서는 사용자 위치를 앱 시작 시 한 번만 필요로 하기 때문에 [] 사용함.
결과적으로 무한 루프에서 벗어나 최초 1번만 실행함.

5. 왜 빈 배열이면 한 번만 실행될까?

React는 의존성 배열을 보고 판단함.
배열 안에 아무 값도 없으면 비교할 값이 없음.
즉, 바뀐 게 없음.
그렇다면, 다시 실행할 이유가 없음.

그래서 첫 렌더링 이후 딱 한 번만 실행하는 것.

6. fallback UI의 역할

<Places fallbackText="Sorting places by distance..." />

위치 정보 요청은 시간이 걸릴 수 있기 때문에 그동안 보여줄 UI가 필요함.

useEffect + fallback UI는 자연스러운 비동기 흐름.

---

useEffect는 렌더링과 무관한 작업(side effect)을 렌더링 이후 안전한 시점에 실행하도록 도와주는 훅이다.