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

일단 비동기 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 문제를 확인하고자 아래처럼도 해보았지만 여전히 동일한 오류가 떠서 어찌해야할지 모르겠습니다 ㅜ import React, { useState, useEffect, useRef } from "react"; import axios from "axios"; import { Link } from "react-router-dom"; const PostList = () => { const componentMounted = useRef(true); const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); if (componentMounted.current) { loadDetail() } return () => { componentMounted.current = false; } }, []); function loadDetail() { axios .post("/api/post/list") .then((response) => { setPosts([...response.data.postList]); setLoading(false); }) .catch((err) => { console.log(err); }); } return ( div> h1>Postsh1> div> {loading ? div>h1>Loadingh1>div> : posts.map((postItem, id) => { return ( div key={id}> Link to={`/post/${postItem.postNum}`}> h1>{postItem.title}h1> p>{postItem.author.displayName}p> p>{postItem.content}p> Link> div> ); })} div> div> ); }; export default PostList;

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

useEffect 에 postInfo 를 주니 무한 리렌더가 되어서 일단 다시 없앴습니다... 희한하게도 Detail 컴포넌트의 유즈이펙트에서 조건문을 빼주니까 다시 새로고침 이슈가 사라지고 정상작동을 하게됐습니다. 원래는 response.data.success 가 트루인지 아닌지 보는 조건문을 넣어놨었는데 그걸 빼버리니 작동하더군요....이유는 모르겠습니다. useEffect(() => { axios.post('/api/post/detail', params).then((response) => { console.log(response.data.postInfo) setPostInfos(response.data.postInfo) setFlag(true) }).catch((err) => { console.log(err); }) }, [])

user의 athor 정보 서버 작업 후 포스팅 400 오류 ㅜ

와 판다선생님 죄송합니다. 제가 서버에서 .exec()을 자꾸 .exac() 이라고 오타를 쳤었네요 ㅜ 깔끔히 해결했습니다

Post 챕터 Read (1) 강의에서 axios 안되시는 분들 정보 공유합니다

dhk.... 저 이것때문에 이틀을 허비했습니다..콜렉션이었다.ㄴ...!! 어쩌d. 어쩐지 collation 이 뭔지 아무리 찾아봐도 관련이 없는 내용만 나왔는데 collection이었군요