특정 버튼을 눌렀을 때만, 이벤트 주기

모달창을 띄우면, 다른 부분이 아닌 닫기 버튼 ❎ 을 눌렀을 때만 창을 닫거나 

하기 이미지처럼 하트 버튼을 누르면 하트의 상태만 변하게 (이미지 전체가 눌리지 않게) 하고 싶을 때가 있다. 

모달 컴포넌트에서 최상위 부모 element에 onClick 이벤트로 stopPropagation()함수를 넣어주고,
버튼 element에 onClick 이벤트로 닫힐 수 있게 설정해주면 끝!

return (
	<div onClick={(e) => {e.stopPropagation()}}>
		<button onClick={handleModal}>X</button>
	.
	.
	.
	</div>
);

  const handleLike = async (id, e) => {
    e.stopPropagation();
    // 로그인 안될 시, 먼저 잡고 로그인
    if (!isLogin) {
      dispatch(modalOpen());
      return;
    }
    
    return (
      <ImgBox img={img}>
        <Icon onClick={(e) => handleLike(id, e)}>
          {isLike ? <AiFillHeart className="heart" /> : <AiOutlineHeart />}
        </Icon>
      </ImgBox>