[RN 개발일지] 좋아요 기능 구현하기 (버튼 클릭 시 이미지 및 좋아요 수 변경)

1. 개발 전 준비물

• 색깔이 안채워진 하트 이미지
• 색깔이 채워진 하트 이미지

 

2. 개발 시작

우리가 만들고자 하는 좋아요 컴포넌트는 다음과 같은 기능이 구현되어야 한다.

1. 버튼 클릭 시 색깔이 안채워진 하트에서 색깔이 채워진 하트로 변경되어야 함. (이 반대의 기능도 구현되어야 함.)

2. 좋아요 버튼 옆에 몇 명이 좋아요를 클릭했는지 갯수가 표시되어야 함.

3. 버튼 클릭 시, 갯수가 변경되어야 함.

(채워진 하트 -> 안채워진 하트로 변경 시, 좋아요 갯수가 1개 줄어야 함.)

(안채워진 하트 -> 채워진 하트로 변경 시, 좋아요 갯수가 1개 늘어나야 함.) 

 

이러한 기능이 구현되도록 좋아요 버튼 컴포넌트를 만들어보자.

 

우선, HeartImageComponent.tsx 파일을 생성한다.

import React, {useState, useEffect, useCallback} from 'react';
import {
    Image,
    Text,
    TouchableOpacity,
    View,
  } from 'react-native';
import FavoriteImg from '../../../images/favorite.png'; //색깔이 안채워진 이미지
import FavoriteActiveImg from '../../../images/favorite_active.png'; //색깔이 채워진 이미지

//ClickFavorite: 좋아요 기능 메인 컴포넌트.
//favClick : 좋아요 클릭 여부 상태 값.
//favNum : 좋아요를 몇명이 클릭했는지에 대한 전체 갯수 값.
export const ClickFavorite = ({favClick, favNum}: any) => {
    // isClicked : 버튼 클릭 시 변경되는 값을 관리하는 함수형 컴포넌트 / boolean 형임. 즉, default가 false.
    const [isClicked, setIsClicked] = useState<boolean | null>(favClick);
    // changeNum : 버튼 클릭 시 변경되는 클릭 갯수를 관리하는 함수형 컴포넌트 / number 형임.
    const [changeNum, setChangeNum] = useState(favNum); //버튼 클릭 시 숫자가 변경되는 함수
    
    //changeFav: onPress시 적용될 이벤트 컴포넌트
    const changeFav = useCallback(() => {
        //버튼을 클릭할 때 마다 현재의 반대 상태로 변경해줌. (true -> false, false -> true)
        setIsClicked(!isClicked);
        
        if(favClick) { //넘겨진 값이 true라면 (즉, 이미 버튼이 클릭된 상태라면)
        	if(isClicked) { //버튼 클릭 상태가 false일 때 (버튼 클릭 취소 시)
            	setChangeNum(favNum - 1); //좋아요 클릭 갯수에서 -1 하기.
            } else { //버튼 클릭 상태가 true일 때(다시 버튼 클릭 시)
            	setChangeNum(favNum); //다시 원래 좋아요 갯수로 돌아가기.
            }
        } else { //넘겨진 값이 false라면 (즉, 이미 버튼이 클릭되지 않은 상태라면)
        	if(!isClicked) { //버튼 클릭 상태가 true일 때(버튼을 클릭했을 때)
            	setChangeNum(favNum + 1);
            } else { //버튼 클릭 상태가 false일 때 (다시 버튼 클릭 취소 시)
            	setChangeNum(favNum);
            }
        }
    },[isClicked, changeNum, favClick, favNum]);
    
    return (
    	<View
        	style={{
            	width: 59,
                height: 24,
                marginRight: 5,
                flexDirection: 'row',
                alignItems: 'center',
            }}>
            <TouchableOpacity onPress={changeFav}>
            	//FavoriteImage : 버튼 클릭 시 이미지 변경되는 컴포넌트
            	<FavoriteImage
                	favClick={isClicked}
                />
            </TouchableOpacity>
            <Text style={{fontSize:10, alignItems:'center', paddingLeft:3}}>
              {changeNum}
            </Text>
        </View>
    );
};

//FavoriteImage : 버튼 클릭 시 하트 이미지가 변경되는 컴포넌트 (안채워진 -> 채워진 / 채워진 -> 안채워진)
export const FavoriteImage = ({favClick}: any) => {
    //favSoucre : 버튼 클릭 시 변경되는 좋아요 이미지를 관리하는 함수형 컴포넌트.
    const [favSource, setFavSource] = useState(FavoriteImg); //기본 값은 안채워진 하트 이미지.
    
    useEffect(() => {
    	if(favClick === true) { //좋아요 클릭 했을 때
        	setFavSource(FavoriteActiveImg); //색깔 채워진 하트 이미지.
        } else { //좋아요 클릭 안했을 때
        	setFavSource(FavoriteImg); //색깔 안채워진 하트 이미지.
        }
    }, [favClick, favSource]);
    
    return <Image source={favSource} style={{width:24, height:24}} />;
}

 

다음으로, 만들어진 ClickFavorite 컴포넌트(좋아요 기능 컴포넌트)를 다른 페이지에서 import 시킨 후 사용해주면 된다.

 

끝..!!