[인스타그램 클론코딩] 07. 팔로우 기능 구현(Front-End)

기존 인스타에서 팔로우 추천목록은 핸드폰번호나 다양한 정보들을 이용하여 띄워주는 것 같지만, 그렇게 깊게 구현할 수 없어 그냥 모든 유저목록에 대하여 팔로우 기능을 수행할 수 있도록 하였다.

팔로우 기능은 다음과 같다.

1. 본인을 제외한 모든 유저 목록 출력

2. 각 유저마다 팔로우/언팔로우 기능 구현

구현 화면

 

1.  FollowContainer.js 작성

const FollowContainer = () => {

    const [userList, setUserList] = useState([]);
    const getUserList = () => {
        withJwtAxios.get('/user-list')
            .then((res) => {
                setUserList(res.data.userList);
            })
    }

    const onClickFollow = (follwingEmail) => {
        withJwtAxios.get('/follow', {params: {followingEmail: follwingEmail}})
            .then((res) => {
                setUserList(res.data.userList);
            });
    }

    const onClickUnFollow = (followingEmail) => {
        withJwtAxios.delete('/follow', {params: {followingEmail: followingEmail}})
            .then((res) => {
                setUserList(res.data.userList);
            });
    }

    useEffect(() => {
        getUserList();
    }, [])

    return (
        <div className={style.follow_container}>
            {userList.map((user, idx) => {
                return(
                    <div key={idx} className={style.user_container}>
                        <div className={style.profile}>
                            <img className={style.thumbnail} src={Static_Base_Url + user.profileUrl}/>
                            <div className={style.text}>{user.nickname}</div>
                        </div>
                        {user.follow !== true?
                            <div className={style.follow} onClick={() => onClickFollow(user.email)}>팔로우</div> :
                            <div className={style.unfollow} onClick={() => onClickUnFollow(user.email)}>언팔로우</div>
                        }
                    </div>
                )
            })}
        </div>
    );
};

 

- getUserList 함수로 서버에서 유저 목록을 받아와 map 함수를 통하여 반복 랜더링 해주었다.

- 만약 본인이 해당 유저를 팔로우하고 있을 경우 unfollow div를, 그렇지 않을 경우 follow div를 출력하도록 설정하였다.