# useEffect내에서 state의 dependency 문제

{% embed url="<https://daveceddia.com/useeffect-hook-examples/>" %}
useEffect 읽어보면 좋은 글
{% endembed %}

## useEffect 내에서 setState 시 디펜던시 문제

### 문제

![](https://2315162687-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MO1zujRJyNAUnlhg0GB%2F-MfcWjAjXBwrv5b_LR_O%2F-MfcWwXL7SYsTAV3JZ9y%2FuseEffect%E1%84%8B%E1%85%A6%20%E1%84%83%E1%85%B5%E1%84%91%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%86%AB%E1%84%89%E1%85%B5%20%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8C%E1%85%A6.png?alt=media\&token=854deca9-8aa5-4973-9a37-92b342aee2c7)

사진을 보면 디펜던시 문제로 워닝이 발생한다. 이에대한 힌트를 보면 아래와같다.

![](https://2315162687-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MO1zujRJyNAUnlhg0GB%2F-MfcWjAjXBwrv5b_LR_O%2F-MfcWwXKkajPc-NM1v0p%2F%E1%84%92%E1%85%B5%E1%86%AB%E1%84%90%E1%85%B3.png?alt=media\&token=60271507-2d2e-41b9-9afa-842485becbc2)

힌트에 해결방법까지 잘 나와있다.

## 해결

해결방법은 `setComments` 에 `arrow-function` 을 넣으면 된다.

![](https://2315162687-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MO1zujRJyNAUnlhg0GB%2F-MfcWjAjXBwrv5b_LR_O%2F-MfcWwXItz0SWsDqiv1Y%2F%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF%E1%84%83%E1%85%AC%E1%86%B7.png?alt=media\&token=60fa03da-29f3-41ff-ba8c-80d9d2a4a07f)

### 문제의 원인

문제의 원인은 간단하다. 문제의 사진에서는 `useEffect` 의 콜백 안에서 `comments` 를 사용한다. 즉 `useEffect` 내부에서 `state` 을 사용하고 있는 것이었다. 이 말은 즉슨 `useEffect` 는 `comments` 에 `dependency` 가 있다고 생각하게 된다는 것이다.

### 문제의 해결

따라서 우리가 할 것은 **`useEffect` 에서 `state` 를 직접사용하지 않는 것이다.** 해결된 코드처럼 `setComments((comments) => [...comments, ...newComments])` 를 하게 될 경우 여기서 사용되는 `comments` 는 `setXXX` 에서 자동으로 `beforeState` 으로 세팅된다. 이렇게 **직접 사용하지 않고 함수의 인자로 beforeComments 를 사용함으로써 의존성 배열에서 제거할 수 있게 되었다.**