새로고침 없이 값 업데이트하기: useEffect

내가 프로젝트하면서 쓴 공책이 있는데, 블로그를 열심히 하려고 하긴 했지만 급해서 공책에만 써있는 문제상황과 해결방안들이 있다.
이력서 쓰려고 보니까 이게 막써서 알아보기가 어렵진 않지만 쉽지도 않아서...

전에 프로젝트 했을때도 그렇고, 항상 이게 문제였다.

window.reload() 를 쓰느냐~ 마느냐~

데이터는 바뀌는데 화면에 바뀐 값을 나타나게 하려면 리프레쉬를 해야하는데.
1. 새로고침하면 state값이 초기화된다.
2. 깜빡이는건 유저한테도 좋지 않고 그냥.. 별로다.

문제를 해결하기 위해서 해본것

1. localstorage 사용하기
   : state 값은 초기화되지 않지만 리로드를 해주어야 하는 건 똑같다.
2. 의존성배열에 바뀌었으면 하는 데이터 넣기
   : 잘못 넣으면 무한으로 돌아간다. 특히 fetch해 데려온 데이터들...
   왜 이들이 sideEffect를 발생시켜서 유의해야하는지 의존성배열에 넣어보고서 깨달았다.

https://stackoverflow.com/questions/59803959/refresh-table-with-useeffect
역시 갓 스택오버플로우.. 다있어

//1. reFresh 상태값을 셋팅
const [refresh, setRefresh] = useState(1);
//2. 의존성배열에 reFresh 부여
useEffect(() => {
  fetchData();
}, [refresh])
const handleAddFriend = () => {
  addFriend();
  //데이터 핸들링할때 reFresh값에 변화를 준다.
  setRefresh(refresh => refresh * -1);
};

처음엔 state를 0으로 주고 +1씩 하는걸로 했는데 점점 숫자가 커지는게 좀 불안했다...
그래서 -1을 곱하는걸로 바꿈.

이때 리프레쉬 함수를 아예 만들어서 사용해도 좋다.

const handleRefresh = () => {
  setRefresh(refresh * -1);
}