[TIL] 2022-02-15 list Item의 onClick 함수 무한 루프 문제

Facts

 list Item의 onClick 함수 무한 루프 문제를 해결

Feelings

useEffect, dispatch를 혼합해서 사용하면 아주 멋진 무한루프와 인터넷 다운을 만날 수 있다. ㅋ

Findings

          {usersToFollow.map((user, idx) =>
            <li css={ListStyle} key={idx}>
              {user}
              <button css={FollowItem} onClick={onClickFollow(idx)}> 팔로우 </button>
            </li>
          )}

위 처럼 하면 li가 생길때마다 onClick 함수가 실행된다. 모든 list item에 대해서 실행되는 것이다.

          {usersToFollow.map((user, idx) =>
            <li css={ListStyle} key={idx}>
              {user}
              <button css={FollowItem} onClick={() => onClickFollow(idx)}> 팔로우 </button>
            </li>
          )}

위처럼 저렇게 해줘야 논리에 맞다.

Future Action Plans

개발 마무리하기