리액트 이벤트 버블링 막기

/* eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);
  let [좋아요갯수, 좋아요갯수변경] = useState([0, 0, 0]);
  let [모달, 모달변경] = useState(false);
  let [title, setTitle] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      {글제목.map((a, i) => {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                모달변경(!모달);
                setTitle(i);
              }}
            >
              {글제목[i]}{" "}
              <span
                onClick={() => {
                  let copy = [...좋아요갯수];
                  copy[i] = copy[i] + 1;
                  좋아요갯수변경(copy);
                }}
              >
                {" "}
                👍{" "}
              </span>
              {좋아요갯수[i]}
            </h4>
            <p>2월 17일 발행</p>
          </div>
        );
      })}

      {모달 == true ? (
        <Modal title={title} 글제목변경={글제목변경} 글제목={글제목} />
      ) : null}
    </div>
  );
}

function Modal(props) {
  return (
    <>
      <div className="modal">
        <h4> {props.글제목[props.title]} </h4>
        <p> 날짜 </p>
        <p> 상세내용 </p>
      </div>
    </>
  );
}

export default App;

위의 코드에서 구현하고자 했던것은 저 글제목에 해당하는 부분을 눌렀을때 모달창이 띄어지는 것이었는데,

실제로 테스트를 해보면 👍를 눌러도 모달창이 띄어지는 오류를 확인할 수있다.

이것은 상위 html로 이벤트가 퍼지는 이벤트 버블링 때문인데,

event.stopPropagation() 를 사용하여 이를 막아줄 수있다.

/* eslint-disable*/
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["글제목1", "글제목2", "글제목3"]);
  let [좋아요갯수, 좋아요갯수변경] = useState([0, 0, 0]);
  let [모달, 모달변경] = useState(false);
  let [title, setTitle] = useState(0);
  let [입력값, 입력값삽입] = useState("");

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      {글제목.map((a, i) => {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                모달변경(!모달);
                setTitle(i);
              }}
            >
              {글제목[i]}{" "}
              <span
                key={i}
                onClick={(e) => {
                  좋아요갯수.map((a, i) => {
                    let copy = [...좋아요갯수];
                  });

                  e.stopPropagation();
                  let copy = [...좋아요갯수];
                  copy[i] = copy[i] + 1;
                  좋아요갯수변경(copy);
                }}
              >
                {" "}
                👍{" "}
              </span>
              {좋아요갯수[i]}
            </h4>
            <p>2월 17일 발행</p>
            <button
              onClick={() => {
                let copy = [...글제목];
                copy.splice(i, 1);
                글제목변경(copy);
              }}
            >
              {" "}
              삭제{" "}
            </button>
          </div>
        );
      })}
      <input
        onChange={(e) => {
          입력값삽입(e.target.value);
        }}
      />
      <button
        onClick={() => {
          let copy = [...글제목];
          copy.unshift(입력값);
          글제목변경(copy);
        }}
      >
        {" "}
        버튼{" "}
      </button>

      {모달 == true ? (
        <Modal title={title} 글제목변경={글제목변경} 글제목={글제목} />
      ) : null}
    </div>
  );
}

function Modal(props) {
  let [제목, 제목변경] = useState([props.글제목]);
  let [글순서, 글순서변경] = useState(props.title);

  return (
    <div>
      {제목.map((a, i) => {
        return (
          <div className="modal" key={i}>
            <h4> {제목[i]} </h4>  /*눌렀을때 글제목 1변경으로 바뀌어야함*/
            <p> 날짜 </p>
            <p> 상세내용 </p>
            <button>버튼</button>
          </div>
        );
      })}
    </div>
  );
}

export default App;

제대로 작동하는것을 확인할 수 있다.