Q＆A
일단 비동기 state 처리와 관련하여 https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/ 을 참고해서 useEffect의 cleanup 함수를 써보았더니 해당 문제가 사라졌습니다. 그리고 제가 최초 state 값이 빈 배열인 경우 어떤곳은 useState({ }) 다른곳은 useState([ ]) 이렇게 해놨는데 차이가 무엇인가요, List페이지의 경우 map 으로 뿌려주는데 useState({ }) 로 하면 오류가 나더라구요
Q＆A
근데 가장 최초의 로그인 후에 메뉴를 눌러서 다른 페이지로 이동하면 반드시 아래의 경고가 뜹니다. 최초 로그인 후 가장 처음 다른페이지로 이동할때 딱 한번뜨고 그다음부터는 안떠요 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 > Posts h1 > div > { loading ? div > h1 > Loading h1 > 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 ;
Q＆A
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 ); }) }, [])
Q＆A
와 판다선생님 죄송합니다. 제가 서버에서 .exec()을 자꾸 .exac() 이라고 오타를 쳤었네요 ㅜ 깔끔히 해결했습니다
Q＆A
dhk.... 저 이것때문에 이틀을 허비했습니다.. 콜렉션이었다.ㄴ...!! 어쩌d. 어쩐지 collation 이 뭔지 아무리 찾아봐도 관련이 없는 내용만 나왔는데 collection이었군요
