fullofomg

<p>일단 비동기 state 처리와 관련하여<br />https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/<br /><br />을 참고해서 useEffect의 cleanup 함수를 써보았더니 해당 문제가 사라졌습니다.<br /><br />그리고 제가 최초 state 값이 빈 배열인 경우<br />어떤곳은 useState({ })&nbsp;<br />다른곳은 useState([&nbsp; ])<br />이렇게 해놨는데 차이가 무엇인가요,<br />List페이지의 경우 map 으로 뿌려주는데<br />useState({ }) 로 하면 오류가 나더라구요</p>

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

<p>근데 가장 최초의 로그인 후에 메뉴를 눌러서 다른 페이지로 이동하면 반드시 아래의 경고가 뜹니다. 최초 로그인 후 가장 처음 다른페이지로 이동할때 딱 한번뜨고 그다음부터는 안떠요</p>
<p>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.</p>
<p>&nbsp; &nbsp; at Login (http://localhost:3000/static/js/bundle.js:917:76)<br /><br /><br />말씀해주신것처럼&nbsp; useEffect&nbsp; 내에서 unmount 문제를 확인하고자&nbsp; 아래처럼도 해보았지만 여전히 동일한 오류가 떠서 어찌해야할지 모르겠습니다 ㅜ&nbsp;<br /><br /></p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span>, { <span style="color: #9cdcfe;">useState</span>, <span style="color: #9cdcfe;">useEffect</span>, <span style="color: #9cdcfe;">useRef</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">"react"</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">axios</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">"axios"</span>;</div>
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Link</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">"react-router-dom"</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">PostList</span> = () <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">componentMounted</span> = <span style="color: #dcdcaa;">useRef</span>(<span style="color: #569cd6;">true</span>);</div>
<div>&nbsp; <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">posts</span>, <span style="color: #dcdcaa;">setPosts</span>] = <span style="color: #dcdcaa;">useState</span>([]);</div>
<div>&nbsp; <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">loading</span>, <span style="color: #dcdcaa;">setLoading</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #569cd6;">false</span>);</div>
<br />
<div>&nbsp; <span style="color: #dcdcaa;">useEffect</span>(() <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; &nbsp; <span style="color: #dcdcaa;">setLoading</span>(<span style="color: #569cd6;">true</span>);</div>
<div>&nbsp; &nbsp; <span style="color: #c586c0;">if</span> (<span style="color: #4fc1ff;">componentMounted</span>.<span style="color: #9cdcfe;">current</span>) {</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #dcdcaa;">loadDetail</span>()</div>
<br />
<div>&nbsp; &nbsp; }</div>
<br />
<div>&nbsp; &nbsp; <span style="color: #c586c0;">return</span> () <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #4fc1ff;">componentMounted</span>.<span style="color: #9cdcfe;">current</span> = <span style="color: #569cd6;">false</span>;</div>
<div>&nbsp; &nbsp; }</div>
<div>&nbsp; }, []);</div>
<br /><br /><br />
<div>&nbsp; <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">loadDetail</span>() {</div>
<div>&nbsp; &nbsp; <span style="color: #4fc1ff;">axios</span></div>
<div>&nbsp; &nbsp; &nbsp; .<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">"/api/post/list"</span>)</div>
<div>&nbsp; &nbsp; &nbsp; .<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">response</span>) <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dcdcaa;">setPosts</span>([...<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">data</span>.<span style="color: #9cdcfe;">postList</span>]);</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #dcdcaa;">setLoading</span>(<span style="color: #569cd6;">false</span>);</div>
<div>&nbsp; &nbsp; &nbsp; })</div>
<div>&nbsp; &nbsp; &nbsp; .<span style="color: #dcdcaa;">catch</span>((<span style="color: #9cdcfe;">err</span>) <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">err</span>);</div>
<div>&nbsp; &nbsp; &nbsp; });</div>
<div>&nbsp; }</div>
<br /><br /><br /><br />
<div>&nbsp; <span style="color: #c586c0;">return</span> (</div>
<div>&nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span>Posts<span style="color: #808080;"></</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">loading</span> ? <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #808080;">><</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span>Loading<span style="color: #808080;"></</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span> : <span style="color: #4fc1ff;">posts</span>.<span style="color: #dcdcaa;">map</span>((<span style="color: #9cdcfe;">postItem</span>, <span style="color: #9cdcfe;">id</span>) <span style="color: #569cd6;">=></span> {</div>
<br />
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #c586c0;">return</span> (</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">key</span>=<span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">id</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #4ec9b0;">Link</span> <span style="color: #9cdcfe;">to</span>=<span style="color: #569cd6;">{</span><span style="color: #ce9178;">`/post/</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">postItem</span>.<span style="color: #9cdcfe;">postNum</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">`</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">postItem</span>.<span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span><span style="color: #808080;"></</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">postItem</span>.<span style="color: #9cdcfe;">author</span>.<span style="color: #9cdcfe;">displayName</span><span style="color: #569cd6;">}</span><span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">postItem</span>.<span style="color: #9cdcfe;">content</span><span style="color: #569cd6;">}</span><span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"></</span><span style="color: #4ec9b0;">Link</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; })<span style="color: #569cd6;">}</span></div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp; &nbsp; <span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>&nbsp; );</div>
<div>};</div>
<br />
<div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">PostList</span>;</div>
</div>

<p>useEffect 에 postInfo 를 주니 무한 리렌더가 되어서 일단 다시 없앴습니다...&nbsp;<br /><br /><br />희한하게도 Detail 컴포넌트의 유즈이펙트에서 조건문을 빼주니까 다시 새로고침 이슈가 사라지고 정상작동을 하게됐습니다.&nbsp; 원래는 response.data.success 가 트루인지 아닌지 보는 조건문을 넣어놨었는데 그걸 빼버리니 작동하더군요....이유는 모르겠습니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>&nbsp; <span style="color: #dcdcaa;">useEffect</span>(() <span style="color: #569cd6;">=></span> {</div>
<br />
<div>&nbsp; &nbsp; <span style="color: #4fc1ff;">axios</span>.<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">'/api/post/detail'</span>, <span style="color: #9cdcfe;">params</span>).<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">response</span>) <span style="color: #569cd6;">=></span> {</div>
<br />
<div>&nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">data</span>.<span style="color: #9cdcfe;">postInfo</span>)</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #dcdcaa;">setPostInfos</span>(<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">data</span>.<span style="color: #9cdcfe;">postInfo</span>)</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #dcdcaa;">setFlag</span>(<span style="color: #569cd6;">true</span>)</div>
<br /><br />
<div>&nbsp; &nbsp; }).<span style="color: #dcdcaa;">catch</span>((<span style="color: #9cdcfe;">err</span>) <span style="color: #569cd6;">=></span> {</div>
<div>&nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">err</span>);</div>
<div>&nbsp; &nbsp; })</div>
<br /><br /><br />
<div>}, [])</div>
</div>

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

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

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