State 끌어올리기 state Lifting, event bubbling, currentTarget

onClick을 가진 부모태그가 있다.

그리고 또다른 onClick 함수를 가진 태그를 자식태그로 넣었을때를 가정해보자.

 

가장 최상위에 있는 부모태그를 클릭할 경우 자식은 클릭되지 않았으니, 부모의 onClick 함수만 작동 될 것이다.

그러나 부모에게 포함되어있는 자식을 클릭할 경우는 어떻게 될까??

 

아래 함수로 확인해보자

export default function StaticRoutingMovedPage() {
const qqq1 = () => {
    alert("1번 클릭");
  };

  const qqq4 = (event: any) => {
    event.stopPropagation();
    alert("4번 클릭");
  };

  return (
    <div>
      {data?.fetchBoards.map((el: any) => (
        <div id={el.writer} onClick={qqq1}>
          <Checkbox />
         
         
         {/* import해서 가져오는 경우에도 자식에 들어가게 된다면, 
          클릭기능에 반드시 event.stopPropagation을 놓치지 않고 작성해야 합니다. */}

          {/* <span onClick={qqq2}><input type="checkbox" onClick={qqq3} /></span> */}



          <span style={{ margin: "10px" }} onClick={qqq4}>
            {el.number}
          </span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
        </div>
      ))}
    </div>
  );
}

 

 

아래는 currentTarget을 이용한 예시이다.

import { useQuery, gql } from "@apollo/client";
import { MouseEvent } from "react";

const FETCH_BOARDS = gql`
  query {
    # fetchBoard(number: 1)
    fetchBoards {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARDS);

  const onClickAlert = (event: MouseEvent<HTMLDivElement>) => {
    // alert(event.target.id);
    // 태그에 id값이 없는곳을 클릭하면 id가 없으므로 아무것도 출력되지 않습니다.

    alert(event.currentTarget.id); //currentTarget은 무조건여야 합니다.
    // 자식을 포함한 부모의 아무곳이나 클릭해도 id 값을 가져올 수 있습니다.
    // 부모와 자식에게 모두 서로 다른 onClick 함수가 있을경우, 자식의 onClick을 클릭하면 부모의 onClick까지 실행됩니다. (propagation:전파)
  };

  return (
    <div>
      {data?.fetchBoards.map((el: any) => (
        <div id={el.writer} onClick={onClickAlert}>
          <span style={{ margin: "10px" }}>{el.number}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.writer}</span>
        </div>
      ))}
    </div>
  );
}