React native / 좋아요 기능 구현

 

1. 간단한 DB 테이블 구조 작성

: 회원은 여러 게시물에 '좋아요'를 누를 수 있다.

 

 

2. vector-icons에서 아이콘결정 

 

vector-icons 종류 확인 사이트 

https://oblador.github.io/react-native-vector-icons/

 

3. 화면 만들기

favorite.js

import { AntDesign } from '@expo/vector-icons';
import { View, Text, Pressable, ToastAndroid } from 'react-native';

const [favorite, setFavorite] = useState();

//Toast Android
const showToastMessage = (msg) => {
    ToastAndroid.showWithGravityAndOffset(
        msg,
        ToastAndroid.SHORT,
        ToastAndroid.BOTTOM,
        25,
        50
    );
};


const addFav = ()=>{
    setFavorite(!favorite);
    axios.get(url)
    .then((response)=>{
        if(response.data == 1){
            showToastMessage("좋아요 삭제");
        }else {
            showToastMessage("좋아요");
        }
    })
}

favorite useState를 통해 좋아요 버튼 클릭유무를 판단 

addFav() 함수를 사용해서 좋아요 버튼 클릭시 favorite의 상태를 변경 해주고, 해당 상태를 DB의 INSERT or DELETE

showToastMessage 함수 사용하여 ToastAndroid 사용 

 

return (
    {favorite? 
        <Pressable onPress={()=>addFav()}>                            
            <AntDesign name="heart" size={30} color="#eb4b4b" />
        </Pressable>
    :
        <Pressable onPress={()=>addFav()}>                            
            <AntDesign name="hearto" size={30} color="#999" />
        </Pressable>
    }
)

 

조건부연산자를 사용하여 현재 favorite 변수의 상태를 체크하고, 값이 ture면 ♥ false면 ♡ icon이 보이도록 설정

icon 클릭시 addFav() 함수를 통해 favorite 변수 변경 및 DB 수정이 이루어지도록 구현