[React] useEffect와 useMemo의 차이점

useEffect`는 **렌더링 후에 실행**되고, `useMemo`는 **렌더링 중에 실행**됩니다. 이 차이는 여러 가지 중요한 결과를 가져오는데, 구체적으로 살펴보겠습니다.

### 1. **렌더링 중 실행 (`useMemo`)**

- **의미**: 컴포넌트가 렌더링되는 동안(`render phase`)에 값을 계산하고, 해당 계산을 메모이제이션합니다.
- **결과**: 렌더링이 끝나기 전에 `useMemo`에 의해 계산된 값이 즉시 컴포넌트의 렌더링 결과에 반영됩니다. 즉, **화면이 그려지기 전에** 미리 계산된 값을 얻을 수 있습니다.
- **영향**:
  - 렌더링 과정에서 값을 계산하고 그 값을 바로 렌더링에 사용합니다. 따라서 UI가 렌더링되기 전에 모든 값을 준비할 수 있습니다.
  - 하지만 계산이 복잡하면 렌더링 시간이 길어질 수 있습니다. (즉, UI가 보여지는 시간이 늦어질 수 있음.)
  - `useMemo`는 값의 메모이제이션을 통해 **불필요한 재계산**을 방지하기 위한 도구입니다.

---

### 2. **렌더링 후 실행 (`useEffect`)**

- **의미**: 컴포넌트가 화면에 렌더링된 **후**(`commit phase`)에 실행됩니다. 즉, 화면이 먼저 그려진 후에 비동기 작업이나 부수 효과가 발생합니다.
- **결과**: 렌더링 자체에 직접적인 영향을 주지 않고, 렌더링이 완료된 후 작업을 수행합니다.
- **영향**:
  - 화면이 먼저 그려지고 그 뒤에 비동기 작업, DOM 업데이트, 구독 설정 같은 사이드 이펙트가 발생하므로 **렌더링 성능에 영향을 덜 줍니다**.
  - 렌더링과 별개로 부수 효과를 처리하므로, **UI가 먼저 보이고** 후속 작업이 비동기로 처리됩니다.
  - 데이터 fetching이나 이벤트 리스너 설정 같은 작업은 렌더링 이후에 비로소 처리됩니다. (이 때문에 초기 로딩 상태나 placeholder를 보여줄 필요가 있음.)

---

### 주요 차이점과 결과

1. **렌더링 성능**:
   - **`useMemo`**는 렌더링 중에 실행되므로, 만약 계산이 복잡하다면 렌더링 속도에 영향을 미칠 수 있습니다. **UI가 그려지기 전에** 계산이 완료되어야 하기 때문에, 렌더링 시간이 길어질 수 있습니다.
   - 반면 **`useEffect`**는 렌더링 후에 실행되므로, 렌더링 과정 자체에는 영향을 미치지 않습니다. 화면이 그려진 후에 추가 작업을 처리할 수 있습니다.

2. **작업의 즉시성**:
   - **`useMemo`**는 즉시 값을 반환하므로, **렌더링 시점에 필요한 값을 미리 준비**하는 데 유용합니다. 예를 들어, 계산된 값을 UI에 즉시 반영해야 할 때 사용됩니다.
   - **`useEffect`**는 사이드 이펙트를 처리하기 때문에, 주로 렌더링 완료 후 발생하는 작업(데이터 fetching, 이벤트 설정 등)에 사용됩니다. UI와 직접적인 값을 반환하는 것과는 차이가 있습니다.

---

### 결론
- **`useMemo`**는 **렌더링 중** 실행되어 값의 계산을 최적화하는 데 사용되며, UI가 그려지기 전에 필요한 계산을 완료합니다.
- **`useEffect`**는 **렌더링 후** 실행되며, UI가 이미 그려진 후에 부수적인 작업을 처리합니다. 이는 성능에 부담을 덜 주고 비동기 작업을 수행하는 데 적합합니다.

**a.** 복잡한 계산을 가진 `useMemo`에서 성능을 최적화하는 방법은?
**b.** `useEffect`의 비동기 데이터 fetching을 효율적으로 처리하는 방법은?