로그인 로그아웃 관련 새로고침 이슈

일단 비동기 state 처리와 관련하여
https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

을 참고해서 useEffect의 cleanup 함수를 써보았더니 해당 문제가 사라졌습니다.

그리고 제가 최초 state 값이 빈 배열인 경우
어떤곳은 useState({ }) 
다른곳은 useState([  ])
이렇게 해놨는데 차이가 무엇인가요,
List페이지의 경우 map 으로 뿌려주는데
useState({ }) 로 하면 오류가 나더라구요

근데 가장 최초의 로그인 후에 메뉴를 눌러서 다른 페이지로 이동하면 반드시 아래의 경고가 뜹니다. 최초 로그인 후 가장 처음 다른페이지로 이동할때 딱 한번뜨고 그다음부터는 안떠요

react_devtools_backend.js:3973 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

    at Login (http://localhost:3000/static/js/bundle.js:917:76)


말씀해주신것처럼  useEffect  내에서 unmount 문제를 확인하고자  아래처럼도 해보았지만 여전히 동일한 오류가 떠서 어찌해야할지 모르겠습니다 ㅜ 

useEffect 에 postInfo 를 주니 무한 리렌더가 되어서 일단 다시 없앴습니다... 


희한하게도 Detail 컴포넌트의 유즈이펙트에서 조건문을 빼주니까 다시 새로고침 이슈가 사라지고 정상작동을 하게됐습니다.  원래는 response.data.success 가 트루인지 아닌지 보는 조건문을 넣어놨었는데 그걸 빼버리니 작동하더군요....이유는 모르겠습니다.

먼저 제가 수강생분의 코드를 모두 확인하지 못하여 정확하진 않을 순 있지만,

아직 axios 통신이 끝나지 않은 상태에서 (state에 데이터가 할당되지 않은 상태에서)

state를 사용하려고 하니 생기는 에러인 것 같습니다.

-

해결 방법은 정말 다양합니다.

저의 코드처럼 postDetail 컴포넌트에서 axios를 호출하는 것이 아니라,

다른 컴포넌트에서 axios를 호출하고 이후 데이터가 잘 전달이 된다음

props로 postDetail 컴포넌트를 불러오셔도 되고,

postDetail 컴포넌트에서 데이터가 할당된 것을 체크 한 다음 사용하셔도 됩니다.

-

올려주신 이미지에서 "console.log 빈데이터" 라 기입해주신 부분의 console.log를,

단순히 호출하는 것이 아니라 useEffect를 postInfo로 조건으로 하여서 호출해보세요!

더 이해하시기 쉬울 것 같습니다.

useEffect(() => {
  console.log(postInfo);
}, [postInfo]);

혹시 제가 생각한 에러가 아니라 다른 문제라면 다시 답변주세요 :)

시간이 지나서 보실지 모르겠지만..

저도 같은 경우가 발생해서 이런저런 시도를 해보았습니다.

강사님이 detail.js 에서 Flag를 useState로 선언하였는데 저도 그렇게 하니 잘 되었습니다. Flag가 true이면 컴포넌트가 나타나고 false이면 사라지는 부분입니다. 

데이터가 서버로 부터 받아지기전에 렌더링되면서 문제가 발생하지 않나 추측해봅니다. 의문인건 Flag 설정안해주어도 PostInfo.title같은것들은 데이터바인딩이 잘되고 PostInfo.author.____부터는 데이터 바인딩시에 에러가 발생하는 것입니다.