[DAY48] 의존성 배열에 서버에서 불러온 값을 넣을 때

1. 문제
   서버에서 불러온 값을 리덕스에 저장하고, 그 값이 수정, 삭제, 다른 아이디 조회 등에 의해 변경될 때마다 리렌더링 하게만들고싶어서 useEffect의 의존성 배열에 그대로 넣었더니 서버에 무한 요청을 보내게 됨............ 서버 터트리는줄 알았음.....

// posts 가 서버에서 불러온 값이라고 쳤을 때,
  useEffect(() => {
      dispatch(__getPosts());
  }, [posts]);

2. 시도
   서버에서 불러온 값을 깊은복사하여 넣어줌

const copyPost = {...posts} 

해결안됨... 제발... 무한요청 멈춰줘.... 백엔드분들이 와서 혹시 지금 무슨일이 일어나고있는거냐고 본인들 콘솔창이 너무 빠르게 올라가고있다고 제보하심.. 저도 알고있답니다 ..ㅎ....

3. 해결

const jsonPost = JSON.stringify(posts)

  useEffect(() => {
      dispatch(__getPosts());
  }, [jsonPost]);

서버에서 불러온 값을 json형식으로 바꿔서 의존성 배열에 넣어주면 됨.

4. 알게된 점
   저렇게 된 이유는 서버에서 불러와서 저장되는 값들은 key:value 형태로 저장되는데, 그럴 때 마다 키의 주소값이 바뀌게 됨. useEffect는 그 값이 새로운 값이라고 인식해서 계~~속 새로고침되면서 서버에 요청을 보내게 되는것이다.....
   따라서, json형식으로 변환하여 string인 것으로 만들어서 그 안의 내용이 바뀔때만 리렌더링되도록 만들면 됨!