Kyongsoo LEE

<p>제로초님 감사합니다.. 제가&nbsp;<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">FollowersModalVisibleHandler 해당 함수 사용하는곳을 찾아보다 보니 제가 왜 넣었는지 모르겠는 코드가 한줄 있었는데 ㅜㅜㅜ 그게 원인이었던거 같습니다...</span></p>
<p><span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">바로 아래의 코드가 followComponent에 있었습니다..</span><span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;"></span></p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #79b6f2;">// FollowModalComponent에서 </span><span style="color: #27e2f1;">modalCancleButtonHandler</span> <span style="color: #79b6f2;">props로 내려주는 부분<br /></span><span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">modalCancleButtonHandler</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #ffffff;">FollowingsModalVisibleHandler</span>&nbsp;<span style="color: #f38e9a;">||</span>&nbsp;<span style="color: #ffffff;">FollowersModalVisibleHandler</span><span style="color: #fc929e;"><span style="color: #fc929e;">;<br /></span></span>
<div style="color: #bbbbbb; line-height: 19px;">
<div><span style="color: #88c6be;"><</span><span style="color: #fc929e;">FollowComponent</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">modalCancleButtonHandler</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">modalCancleButtonHandler</span><span style="color: #88c6be;">}</span></div>
</div>
</div>
<div><span style="color: #79b6f2;"></span>
<div style="line-height: 19px;"><span style="color: #88c6be;">/></span></div>
<div style="line-height: 19px;"><span style="color: #88c6be;"></span></div>
</div>
<div><span style="color: #79b6f2;">// FollowComponent</span></div>
<div><span style="color: #79b6f2;">useEffect</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">return</span>&nbsp;<span style="color: #88c6be;">()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">modalCancleButtonHandler</span>&nbsp;<span style="color: #f38e9a;">&&</span>&nbsp;<span style="color: #79b6f2;">modalCancleButtonHandler</span><span style="color: #88c6be;">()</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">},&nbsp;[</span><span style="color: #ffffff;">followList</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
</div>
<p></p>
<p><span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">ㅜㅜ 감사합니다. 그래도 물어보면서 잘못알고 있었던 개념도 알게되고 정말 감사합니다!&nbsp;</span><span style="box-sizing: inherit; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px; background-color: #ffffff;"></span></p>

리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

<p>제로초님 말씀대로 아래와같이 console을 넣고 찍어보니 팔로우 리스트가 업데이트 될때 FollowersModalVisibleHandler가 또 호출이됩니다..</p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">FollowersModalVisibleHandler</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useCallback</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">console</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">log</span><span style="color: #88c6be;">(</span><span style="color: #88c6be;">'</span><span style="color: #8dc891;">FollowersModalVisibleHandler&nbsp;호출</span><span style="color: #88c6be;">'</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #79b6f2;">setFollowersVisible</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">prev</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #f38e9a;">!</span><span style="color: #ffffff;">prev</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
</div>
<p><span style="background-color: #282c34; color: #bbbbbb; font-size: 14px; white-space: pre;">&nbsp;&nbsp;</span><span style="background-color: #282c34; font-size: 14px; white-space: pre; color: #88c6be;">},&nbsp;[])</span><span style="background-color: #282c34; font-size: 14px; white-space: pre; color: #fc929e;">;</span>&nbsp;</p>
<p>그런데 저는 followComponent에서 무한 스크롤을 구현해줄때 따로 함수를 호출하지 않았는데 왜그러는 것일까요..?</p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">onIntersect</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useCallback</span><span style="color: #88c6be;">(</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">(</span><span style="color: #ffffff;">entries</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">observer</span><span style="color: #88c6be;">)</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div><span style="color: #88c6be;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #797979; font-style: italic;">//&nbsp;console.log('entries&nbsp;?&nbsp;',&nbsp;entries);</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">entries</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">forEach</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">entry</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">if</span>&nbsp;<span style="color: #88c6be;">(</span><span style="color: #ffffff;">followList</span><span style="color: #88c6be;">.</span>length&nbsp;<span style="color: #f38e9a;">>=</span>&nbsp;<span style="color: #fc929e;">5</span>&nbsp;<span style="color: #f38e9a;">&&</span>&nbsp;<span style="color: #ffffff;">entry</span><span style="color: #88c6be;">.</span><span style="color: #beedff;">isIntersecting</span><span style="color: #88c6be;">)</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div><span style="color: #88c6be;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #797979; font-style: italic;">//&nbsp;console.log('api&nbsp;호출');</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">mode</span>&nbsp;<span style="color: #f38e9a;">===</span>&nbsp;<span style="color: #88c6be;">'</span><span style="color: #8dc891;">followings</span><span style="color: #88c6be;">'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f38e9a;">?</span>&nbsp;<span style="color: #79b6f2;">dispatch</span><span style="color: #88c6be;">(</span><span style="color: #79b6f2;">getFollowingsRequest</span><span style="color: #88c6be;">({</span>&nbsp;<span style="color: #ffffff;">userId</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #8adf69;">offset</span><span style="color: #88c6be;">:</span>&nbsp;<span style="color: #ffffff;">followList</span><span style="color: #88c6be;">.</span>length&nbsp;<span style="color: #88c6be;">}))</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #79b6f2;">dispatch</span><span style="color: #88c6be;">(</span><span style="color: #79b6f2;">getFollowersRequest</span><span style="color: #88c6be;">({</span>&nbsp;<span style="color: #ffffff;">userId</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #8adf69;">offset</span><span style="color: #88c6be;">:</span>&nbsp;<span style="color: #ffffff;">followList</span><span style="color: #88c6be;">.</span>length&nbsp;<span style="color: #88c6be;">}))</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">observer</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">unobserve</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">entry</span><span style="color: #88c6be;">.</span><span style="color: #beedff;">target</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span>&nbsp;<span style="color: #797979; font-style: italic;">//&nbsp;api를&nbsp;불러왔다면&nbsp;타겟&nbsp;엘리먼트에&nbsp;대한&nbsp;관찰을&nbsp;멈춘다</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">})</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">},</span></div>
<div><span style="color: #88c6be;">&nbsp;&nbsp;&nbsp;&nbsp;[</span><span style="color: #ffffff;">followList</span><span style="color: #88c6be;">],</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<br />
<div>&nbsp;&nbsp;<span style="color: #79b6f2;">useEffect</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">let</span>&nbsp;<span style="color: #ffffff;">observer</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">if</span>&nbsp;<span style="color: #88c6be;">(</span><span style="color: #ffffff;">target</span><span style="color: #88c6be;">)</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div><span style="color: #88c6be;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #797979; font-style: italic;">//&nbsp;console.log('target&nbsp;있음');</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">observer</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #f38e9a; font-style: italic;">new</span>&nbsp;<span style="color: #fac863;">IntersectionObserver</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">onIntersect</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #88c6be;">{</span>&nbsp;<span style="color: #8adf69;">threshold</span><span style="color: #88c6be;">:</span>&nbsp;<span style="color: #fc929e;">1</span>&nbsp;<span style="color: #88c6be;">})</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">observer</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">observe</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">target</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">}</span></div>
<br />
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">return</span>&nbsp;<span style="color: #88c6be;">()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">observer</span>&nbsp;<span style="color: #f38e9a;">&&</span>&nbsp;<span style="color: #ffffff;">observer</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">disconnect</span><span style="color: #88c6be;">()</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">},&nbsp;[</span><span style="color: #ffffff;">target</span><span style="color: #88c6be;">,&nbsp;</span><span style="color: #ffffff;">followList</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
</div>

<p>현재 부모컴포넌트인 UserInfoAndSocial 컴포넌트에서 아래와같이 FollowModalComponent로 visible props를 내려주고있습니다.&nbsp;</p>
<p>콘솔을 찎어보니 팔로우 리스트를 새로 불러오면 부모컴포넌트인 UserInfoAndSocial 컴포넌트에 걸어두었던 콘솔이 찍히는것을 보니 UserInfoAndSocial가 리렌더링되면서 followingsVisible state가 기본값인 false로 돌아가 모달창이 닫기는게 아닐까하고 추측하고있습니다.</p>
<p><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #ffffff;">console</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #88c6be;">.</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #79b6f2;">log</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #88c6be;">(</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #88c6be;">'</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #8dc891;">==>&nbsp;[UserInfoAndSocial]&nbsp;부모&nbsp;컴포넌트&nbsp;리렌더링</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #88c6be;">'</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #88c6be;">)</span><span style="font-size: 14px; white-space: pre; background-color: #282c34; color: #fc929e;">;</span></p>
<p>질문 1) 부모컴포넌트에서 useSelector를 통해 followList를 가져오지않고 자식 컴포넌트에서 가져오도록 코드를 수정했는데 왜 부모컴포넌트인 UserInfoAndSocial 컴포넌트가 리렌더링 되는것인가요?</p>
<div style="color: #bbbbbb; font-size: 14px; white-space: pre; background-color: #282c34;"><span style="color: #88c6be;">// followComponent</span></div>
<div style="color: #bbbbbb; font-size: 14px; white-space: pre; background-color: #282c34;">
<div style="line-height: 19px;">
<div><span style="color: #c5a5c5; font-style: italic;">function</span>&nbsp;<span style="color: #79b6f2;">FollowComponent</span><span style="color: #88c6be;">({</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">titleShow</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">modalCancleButtonHandler</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">mode</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">padding</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">userInfo</span><span style="color: #88c6be;">,</span></div>
<div><span style="color: #88c6be;">}</span><span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #fac863;">FollowComponent</span><span style="color: #88c6be;">)</span><span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #fac863;">JSX</span><span style="color: #88c6be;">.</span><span style="color: #fac863;">Element</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">followerList</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">followerList</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">followingList</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">followingList</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;"> // 말씀하신대로 부모컴포넌트에서 불러와서 내려주기때문에 리렌더링이 되는게 아닌가싶어 자식컴포넌트자체에서 followList와</span></div>
<div><span style="color: #fc929e;">followingList를 불러와 사용하고 있습니다.</span><span style="color: #fc929e;"></span></div>
<div><span style="color: #fc929e;"></span></div>
<div><span style="color: #fc929e;">//이하 생략</span></div>
</div>
</div>
<p>질문2) 모달창이 닫기지 않도록 하려면 어떻게 하면 좋을까요?... followlist를 USER 리듀서에서 분리해야만 할까요.. ?..</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>아래는 부모컴포넌트 UserInfoAndSocial, FollowModallComponent 코드입니다.</p>
<p>UserInfoAndSocial > FollowModallComponent > FollowComponent 이런 구조로 되어있습니다.</p>
<p></p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="line-height: 19px;">
<div><span style="color: #c5a5c5; font-style: italic;">// </span><span style="color: #27e2f1;">UserInfoAndSocial</span> 컴포넌트</div>
<div><span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">UserInfoAndSocial</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">memo</span><span style="color: #88c6be;">(({</span>&nbsp;<span style="color: #ffffff;">me</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">userInfo</span>&nbsp;<span style="color: #88c6be;">})</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #88c6be;">[</span><span style="color: #27e2f1;">followingsVisible</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #27e2f1;">setFollowingsVisible</span><span style="color: #88c6be;">]</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useState</span><span style="color: #88c6be;">(</span><span style="color: #ff8b50; font-style: italic;">false</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #88c6be;">[</span><span style="color: #27e2f1;">followersVisible</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #27e2f1;">setFollowersVisible</span><span style="color: #88c6be;">]</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useState</span><span style="color: #88c6be;">(</span><span style="color: #ff8b50; font-style: italic;">false</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<br />
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">FollowingsModalVisibleHandler</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useCallback</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #79b6f2;">setFollowingsVisible</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">prev</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #f38e9a;">!</span><span style="color: #ffffff;">prev</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">},&nbsp;[</span><span style="color: #ffffff;">followingsVisible</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
<br />
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">FollowersModalVisibleHandler</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useCallback</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #79b6f2;">setFollowersVisible</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">prev</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #f38e9a;">!</span><span style="color: #ffffff;">prev</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">},&nbsp;[</span><span style="color: #ffffff;">followingsVisible</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;"></span></div>
<div>
<div style="line-height: 19px;"><span style="color: #ffffff;">console</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">log</span><span style="color: #88c6be;">(</span><span style="color: #88c6be;">'</span><span style="color: #8dc891;">==>&nbsp;[UserInfoAndSocial]&nbsp;부모&nbsp;컴포넌트&nbsp;리렌더링</span><span style="color: #88c6be;">'</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
</div>
<span style="color: #fc929e;"></span><br />
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">return</span>&nbsp;<span style="color: #88c6be;">(</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;"><></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"><</span><span style="color: #fc929e;">FollowModalComponent</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">mode</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">"</span><span style="color: #8dc891;">followings</span><span style="color: #88c6be;">"</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">userInfo</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">userInfo</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">visible</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">followingsVisible</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">FollowingsModalVisibleHandler</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">FollowingsModalVisibleHandler</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;">/></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"></></span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #88c6be;">})</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;"></span></div>
<div><span style="color: #fc929e;">// FollowModalComponent 컴포넌트</span></div>
<div>
<div style="line-height: 19px;">
<div><span style="color: #c5a5c5; font-style: italic;">function</span>&nbsp;<span style="color: #79b6f2;">FollowModalComponent</span><span style="color: #88c6be;">({</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">mode</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">visible</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">userInfo</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">FollowingsModalVisibleHandler</span><span style="color: #88c6be;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">FollowersModalVisibleHandler</span><span style="color: #88c6be;">,</span></div>
<div><span style="color: #88c6be;">}</span><span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #fac863;">FollowModalComponent</span><span style="color: #88c6be;">)</span><span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #fac863;">JSX</span><span style="color: #88c6be;">.</span><span style="color: #fac863;">Element</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">modalCancleButtonHandler</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useCallback</span><span style="color: #88c6be;">(()</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffffff;">mode</span>&nbsp;<span style="color: #f38e9a;">===</span>&nbsp;<span style="color: #88c6be;">'</span><span style="color: #8dc891;">followings</span><span style="color: #88c6be;">'</span>&nbsp;<span style="color: #f38e9a;">?</span>&nbsp;<span style="color: #79b6f2;">FollowingsModalVisibleHandler</span><span style="color: #88c6be;">()</span>&nbsp;<span style="color: #f38e9a;">:</span>&nbsp;<span style="color: #79b6f2;">FollowersModalVisibleHandler</span><span style="color: #88c6be;">()</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">},&nbsp;[</span><span style="color: #ffffff;">mode</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
<br />
<div>&nbsp;&nbsp;<span style="color: #ffffff;">console</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">log</span><span style="color: #88c6be;">(</span><span style="color: #88c6be;">'</span><span style="color: #8dc891;">==>&nbsp;followModalComponent&nbsp;리렌더링</span><span style="color: #88c6be;">'</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">console</span><span style="color: #88c6be;">.</span><span style="color: #79b6f2;">log</span><span style="color: #88c6be;">(</span><span style="color: #88c6be;">'</span><span style="color: #8dc891;">followModalComponent&nbsp;visible&nbsp;?&nbsp;</span><span style="color: #88c6be;">'</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">visible</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<br />
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">return</span>&nbsp;<span style="color: #88c6be;">(</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;"><</span><span style="color: #fc929e;">Modal</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">title</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">"</span><span style="color: #8dc891;">Followings</span><span style="color: #88c6be;">"</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">visible</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">visible</span><span style="color: #88c6be;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">onCancel</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">modalCancleButtonHandler</span><span style="color: #88c6be;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">okButtonProps</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{{</span>&nbsp;<span style="color: #8adf69;">style</span><span style="color: #88c6be;">:</span>&nbsp;<span style="color: #88c6be;">{</span>&nbsp;<span style="color: #8adf69;">display</span><span style="color: #88c6be;">:</span>&nbsp;<span style="color: #88c6be;">'</span><span style="color: #8dc891;">none</span><span style="color: #88c6be;">'</span>&nbsp;<span style="color: #88c6be;">}</span>&nbsp;<span style="color: #88c6be;">}}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"><</span><span style="color: #fc929e;">FollowComponent</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">modalCancleButtonHandler</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">modalCancleButtonHandler</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">titleShow</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ff8b50; font-style: italic;">false</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">mode</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">mode</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">padding</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ff8b50; font-style: italic;">false</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">userInfo</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">userInfo</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">scroll</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #fc929e;">1</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;">/></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"></</span><span style="color: #fc929e;">Modal</span><span style="color: #88c6be;">></span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #88c6be;">}</span><span style="color: #88c6be;"></span></div>
</div>
</div>
</div>
</div>

<p>넵 맞습니다 아래와같이 변수를 받아서 사용하고 있습니다</p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #c5a5c5; font-style: italic;">import</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #ffffff;">USER</span><span style="color: #88c6be;"></span></div>
<div><span style="color: #88c6be;">}</span>&nbsp;<span style="color: #c5a5c5; font-style: italic;">from</span>&nbsp;<span style="color: #88c6be;">'</span><span style="color: #8dc891;">../../userSlice</span><span style="color: #88c6be;">'</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;"></span></div>
<div><span style="color: #fc929e;"><span style="color: #fc929e;">// index <span style="color: #27e2f1;">combinedReducer에서 아래와같이 사용중입니다.</span><br /></span></span>
<div style="color: #bbbbbb; line-height: 19px;">
<div><span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">combinedReducer</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">combineReducers</span><span style="color: #88c6be;">({</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">]:</span>&nbsp;<span style="color: #ffffff;">userReducer</span><span style="color: #88c6be;"></span></div>
<div>&nbsp;&nbsp;<span style="color: #88c6be;">})</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">return</span>&nbsp;<span style="color: #79b6f2;">combinedReducer</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">action</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
</div>
</div>
</div>

<p>아래와같이 변경해보았는데도 똑같은 문제가 지속됩니다..</p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #88c6be;">{</span>&nbsp;<span style="color: #27e2f1;">me</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #27e2f1;">userInfo</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #27e2f1;">followingList</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #27e2f1;">followerList</span>&nbsp;<span style="color: #88c6be;">}</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">])</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;"> // 기존에 사용했던 방법</span></div>
</div>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;"><br />
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">me</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">me</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">userInfo</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">userInfo</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">followerList</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">followerList</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">const</span>&nbsp;<span style="color: #27e2f1;">followingList</span>&nbsp;<span style="color: #f38e9a;">=</span>&nbsp;<span style="color: #79b6f2;">useSelector</span><span style="color: #88c6be;">(</span><span style="color: #ffffff;">state</span>&nbsp;<span style="color: #c5a5c5;">=></span>&nbsp;<span style="color: #ffffff;">state</span><span style="color: #88c6be;">[</span><span style="color: #27e2f1;">USER</span><span style="color: #88c6be;">].</span><span style="color: #beedff;">followingList</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #fc929e;">// 바꾼 방법</span></div>
<div><span style="color: #fc929e;"></span></div>
<div></div>
<div>// 부모컴포넌트에서 자식컴포넌트(FollowComponent)로 state를 props로 넘겨주고있습니다.</div>
<div>
<div style="line-height: 19px;">
<div><span style="color: #88c6be;"><</span><span style="color: #fc929e;">Modal</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">title</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">"</span><span style="color: #8dc891;">Followers</span><span style="color: #88c6be;">"</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">visible</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">followerVisible</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">onCancel</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">modalCancleButtonHandler</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">okButtonProps</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{{</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #8adf69;">style</span><span style="color: #88c6be;">:</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #caffb5;">display</span><span style="color: #88c6be;">:</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #88c6be;">'</span><span style="color: #8dc891;">none</span><span style="color: #88c6be;">'</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #88c6be;">}</span><span style="color: #ffffff;">&nbsp;</span><span style="color: #88c6be;">}}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;">></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"><</span><span style="color: #fc929e;">FollowComponent</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">followerList</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">followerList</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">followingList</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">followingList</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">me</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">me</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #c5a5c5; font-style: italic;">userInfo</span><span style="color: #f38e9a;">=</span><span style="color: #88c6be;">{</span><span style="color: #ffffff;">userInfo</span><span style="color: #88c6be;">}</span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;">/></span></div>
<div><span style="color: #ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #88c6be;"></</span><span style="color: #fc929e;">Modal</span><span style="color: #88c6be;">></span></div>
</div>
</div>
</div>

getServerSideProps에서 context.store.dispatch를 이용해 redux store에 state를 가져오는 과정에서 질문이있습니다.

<p>와.. 감사합니다 제로초님 11초에서 2~3초로 줄었습니다.. 제로초님 현재 프로젝트에서 유저가 요청할때마다 같은데이터를 계속 보내주는 것이 비효율적이라 생각하여 throttle을 사용해 아래와같이 코드를 작성하여 데이터를 요청하는 함수가 실행되고 5초가 지날때까지 요청이 안가도록 해주었는데요 제가&nbsp; throttle에 대해 알맞게 이해한게 맞을까요?, 그리고 이러한 경우에 takelastest를 사용해도 제가 하고자하는 기능 구현이 될까요?</p>
<p></p>
<div style="color: #bbbbbb; background-color: #282c34; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #c5a5c5; font-style: italic;">function*</span>&nbsp;<span style="color: #79b6f2;">watchGetUserPapers</span><span style="color: #88c6be;">()</span>&nbsp;<span style="color: #88c6be;">{</span></div>
<div>&nbsp;&nbsp;<span style="color: #c5a5c5; font-style: italic;">yield</span>&nbsp;<span style="color: #79b6f2;">throttle</span><span style="color: #88c6be;">(</span><span style="color: #fc929e;">5000</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">getUserPaperRequest</span><span style="color: #88c6be;">,</span>&nbsp;<span style="color: #ffffff;">getUserPapers</span><span style="color: #88c6be;">)</span><span style="color: #fc929e;">;</span></div>
<div><span style="color: #88c6be;">}<br /></span></div>
</div>

Kyongsoo LEE

Posts