[React-Native] AsyncStorage 좋아요 구현

AsyncStorage는 암호화 되지 않은 비동기적인 데이터를 관리하는 시스템으로
앱을 종료하더라도 데이터가 남아있고, LocalStorage 대신에 사용한다.

<TouchableOpacity
   onPress={() => {
      handleClickLike(item._id)
   }}>
{likedArticles.includes(item._id)
   ? <StarFillSVG style={{ flex: 1, marginTop: 4 }} />
   : <StarSVG style={{ flex: 1, marginTop: 4 }} />
}
</TouchableOpacity>

좋아요를 클릭할 때마다 handleClickLike함수를 호출하게 되는데 이때 item._id를 함께 넘겨주게 된다.

 const [likedArticles, setLikedArticles] = useState<Array<string>>([]);

 const handleClickLike = async (id: string) => {
        // 사용자가 좋아요를 누른 기사의 ID를 배열에서 찾음
        const index = likedArticles.indexOf(id);
        const updatedLikedArticles = [...likedArticles]; // 새로운 배열을 생성해서 원본 배열을 변경하지 않음

        if (index === -1) {
            // ID가 배열에 없다면 좋아요를 표시하고 배열에 추가
            updatedLikedArticles.push(id);
        } else {
            // ID가 배열에 있다면 좋아요 표시를 취소하고 배열에서 제거
            updatedLikedArticles.splice(index, 1);
        }

        // 좋아요 상태를 AsyncStorage에 저장
        await AsyncStorage.setItem('likedArticles', JSON.stringify(updatedLikedArticles));

        // 상태 업데이트
        setLikedArticles(updatedLikedArticles);
    }

사용자가 좋아요를 누르면 누른 기사의 id에서 배열에서 찾는다. id가 배열에 없다면 배열에 push 하여 배열을 추가해주고, id가 배열에 있다면 해당 id를 배열에서 제거해준다.

그리고 좋아요 상태를 AsyncStorage에 저장해주고 상태를 업데이트 시켜준다.

  const getLikedArticles = async () => {
        try {
            const likedArticlesData = await AsyncStorage.getItem('likedArticles');
            if (likedArticlesData !== null) {
                // AsyncStorage에서 읽은 데이터를 파싱하여 배열로 변환
                setLikedArticles(JSON.parse(likedArticlesData));
            }
        } catch (error) {
            console.error('error', error);
        }
    };

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

처음 렌더링될 때 getLikedArticles를 호출하는데
getLikedArticles에는 AsyncStorage에 저장되어 있는 좋아요 데이터를 가지고 있다.
AsyncStorage에서 읽은 데이터를 파싱하여 배열로 변환해준다.

*참고 )
JSON 이나 배열 형태 데이터의 경우 JSON.parse 와 JSON.stringify로 저장해주어야 한다.