@@ -0,0 +1,89 @@
+'use client';
+
+import { getFollowerList, getFollowingList } from '@/apis/getFollowList';
+import { checkState, followState, followerList, followingList, inputToken, loginClick } from '@/recoil/atoms';
+import { followList } from '@/types/types';
+import { useEffect } from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import ListElement from './ListElement';
+
+export default function FollowList() {
+  const [followers, setFollowers] = useRecoilState(followerList);
+  const [followings, setFollowings] = useRecoilState(followingList);
+  const followBtnState = useRecoilValue(followState);
+  const setCheckState = useSetRecoilState(checkState);
+  const inputTokenValue = useRecoilValue(inputToken);
+  const [loginClickState, setLoginClickState] = useRecoilState(loginClick);
+
+  useEffect(() => {
+    getFollowingList(setFollowings, inputTokenValue);
+    getFollowerList(setFollowers, inputTokenValue);
+  }, []);
+
+  const followerID = followers.map(user => user.id);
+  const followingID = followings.map(user => user.id);
+
+  const followEachOther = followings.filter(user => {
+    return followerID.includes(user.id) && user;
+  });
+
+  const notFollowEachOther = followers.filter(user => {
+    return !followingID.includes(user.id) && user;
+  });
+
+  const onClickCheck = () => {
+    setCheckState(true);
+  };
+
+  const onClickRemove = () => {
+    setCheckState(false);
+  };
+
+  useEffect(() => {
+    onClickRemove();
+  }, [followBtnState]);
+
+  function handleClickLogin(login: string) {
+    setLoginClickState(prevlogin => (prevlogin === login ? ' ' : login));
+  }
+
+  useEffect(() => {
+    console.log(loginClickState);
+  }, [loginClickState, setLoginClickState]);
+
+  return (
+    <section className="commonBackground flex h-[480px] w-full flex-col">
+      <div className="flex justify-end gap-[14px] px-[25px] py-[20px]">
+        <button
+          className="commonButton h-[25px] w-[65px] bg-white text-black hover:bg-red hover:text-white"
+          onClick={onClickCheck}>
+          ✔️ 모두 선택
+        </button>
+        <button
+          className="commonButton h-[25px] w-[65px] bg-white text-black hover:bg-red hover:text-white"
+          onClick={onClickRemove}>
+          모두 해지
+        </button>
+      </div>
+      <div className="flex h-[350px] w-[340px] flex-col gap-[20px] overflow-scroll py-[5px]">
+        {followBtnState === 'follow'
+          ? followEachOther.map((user: followList) => {
+              const { id, login, avatar_url } = user;
+              return <ListElement key={id} id={id} login={login} avatar_url={avatar_url} />;
+            })
+          : notFollowEachOther.map((user: followList) => {
+              const { id, login, avatar_url } = user;
+              return (
+                <ListElement
+                  onClick={() => handleClickLogin(login)}
+                  key={id}
+                  id={id}
+                  login={login}
+                  avatar_url={avatar_url}
+                />
+              );
+            })}
+      </div>
+    </section>
+  );
+}

리뷰: 만약 수정이 일어나게 됐을때, onClickRemove가 어느 시점에 실행되는지에 대한 고려가 항상 이뤄져야 해서 사이드 이펙트가 생겨 변경하기도 아주 까다로워 지는 문제가 있어요. 

>로직을 follow 버튼이 선택되는 곳으로 옮기는 것이 좋을 것 같아요.

요렇게 해야 해당 로직이 실행되는 시점에만 onClickRemove가 실행됨이 보장되기 때문에 사이드 이펙트를 최소화할 수 있습니당