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

모달창이 열리면 닫기 버튼 을 눌렀을 때만 창이 닫히고 다른 부분은 닫히지 않습니다.

아래 이미지와 같이 하트버튼을 눌렀을 때 하트의 상태만 변경(전체 이미지가 눌러지지 않도록)하고 싶을 때가 있습니다.

모달 구성 요소에서 stopPropagation() 함수를 최상위 부모의 onClick 이벤트로 추가합니다.
버튼 요소를 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>