react useState를 이용한 인스타그램 하트 애니메이션 구현

리액트 상태관리를 배우면서 가장 만들어 보고 싶었던 기능이 인스타그램의 하트 클릭 애니메이션이었다. 더블클릭까지는 아니어도 클릭을 하면 아이콘의 색이 채워지는 기능을 구현하고 싶었다.
이것을 할 수 있는지를 구글링해 보았는데, 내가 원하는 기능을 어떻게 구현하는지 예를 들어 상세하게 설명한 문서가 있었다.
https://marysallent.medium.com/how-to-toggle-images-icons-using-react-hooks-for-beginners-by-a-beginner-e4b8459f1ce4

이분의 글을 참조하여 완성할 수 있었고, 내가 작성한 코드의 일부는 다음과 같다.

import { useState } from 'react';
import './Item.css';

function Item({items}){
	const [display,setDisplay] = useState(true);
    function handleChange(){
        setDisplay(previousImg => !previousImg)
    }		
    return (
        <article>
            <div className="container">
                <img className="image-thumbnail" src={items.src} alt={items.id}/>
                <div className="icons">
                    {display?
                        <i 
                        className="far fa-heart"
                        onClick={handleChange}
                        ></i>
                        :
                        <i 
                        className="fas fa-heart"
                        onClick={handleChange}
                        ></i>
                    }
...후략
}

이 효과는 boolean속성을 가지는 상태를 토글링하여,
true값을 가질 때와 false값을 가질 때에 서로 다른 이미지를 보여주도록 함으로써 구현할 수 있었다.

위 코드에서 삼항연산자가 보이는가?
display라는 상태가 참일 경우에는 비어 있는 하트 아이콘을 렌더링하고,
거짓일 경우에는 색이 채워진 하트 아이콘을 렌더링한다.

상태의 기본값은 참이기 때문에 사용자가 처음으로 보는 아이콘은 속이 빈 하트 아이콘이다.
이 아이콘에는 이벤트핸들러가 작성되어 있는데, 클릭 이벤트가 발생하면 handleChange라는 함수가 실행된다.
handleChange함수는 display상태를 갱신하는 함수 setDisplay에게 콜백함수를 전달해준다.
이때 콜백 함수는 display 상태값을 반전시켜준다. 즉 참이면 거짓으로, 거짓이면 참으로 말이다.

이제 속이 빈 하트 아이콘을 눌렀을 경우를 생각해 보자.
이 경우 display 상태는 거짓이 되면서 삼항연산자 식에 의하여, 속이 채워진 하트 아이콘이 렌더링된다.

이 상태에서 다시 하트 아이콘을 누를 경우 display 상태는 참이 되면서 속이 빈 하트 아이콘이 렌더링되는 것이다.

이것을 구현한 파일을 보고 싶으시다면 제 깃허브 레포를 봐 주세요:)