[TIL] 2022년 01월 24일 TIL - Event Bubbling

이번시간에 배운 내용은 이벤트 버블링에 대해 배운 시간이었다 

 

이벤트 버블링? 

이벤트 버블링은 상대방이 내용을 클릭할때 상세보리고 가는 경우에 문제가 발생하는데 

어느 것을 클릭하든 전체를 클릭했을때 상세페이지로 넘어가고 싶을때 문제가 발생한다.

onClick 이벤트 시 유저를 불러오기 위해서는 어떤 방식으로 넣어야 할까?

 

이벤트 버블링은 자식에게 부모로 이벤트를 전달해주는 것

전달이 자식에서 부모로 올라간다. 자식 태그를 클릭해도 onClick이벤트가 발생하는데 

그런데 이 클릭이 전파되는 것은 부모태그에도 전달이 된다.

실제로 onClick 함수는 부모한테 바인딩 허더라도 자식이 내용을 클릭하더라도

밖에 있는 onClick이 실행된다.

 

  const onClickUser = (event) => {
       alert(`${event.currentTarget.id} 님이 작성한 글입니다.`);

  }

이벤트 버블링을 맊기 위해서는 event.target.id 이벤트를 이용해야 한다. 

 

비퀴를 재발명하지 마라!!

• 시간 절약
• 버그 최소화

다양한 브라우저?

지금 나오는 곳에서가 아닌 다른 환경에서도 제대로 나오고 다양한 사이즈도 가능한가? 아니면 여러개 기능도 많이 추가할 수 있나? 

 

아무리 라이브러리가 쉬워보인다 해도 그 안에 엄청난 기능을 내포하고 있다. 

그러기 때문에 여러사람이 라이브러리를 이용해 같이 만드는 것이다.

 

그럼 라이브러리를 막 가져다 사용해도 되는가?

절대 아니다. 검증된 라이브러리를 한에서 사용해야 한다. 아무 라이브러리나 가져다 쓰게 되면 그 라이브러리는

업데이트가 안되고 있는 경우도 있다.

 

라이브러리가 업데이트가 되었는지, 최근에 업데이트 되는지, 오래되도 사용량이 많은지 참고하는 것이 중요하다.

그런 라이브러리들도 리스트만 알아도 실력이다.

 

    {/*  자식을 클릭한 onClick 이벤트가 부모에게 까지 전파됨  */}
        {props.data?.fetchBoardComments.map((el) => (
        <S.ItemWrapper key={el._id}  id={el?.writer} onClick={onClickUser} >
          <S.FlexWrapper >
            <AiOutlineComment size={40}   />
            <S.MainWrapper>
              <S.WriterWrapper>
                <S.Writer>{el?.writer}</S.Writer>
              </S.WriterWrapper>
              <S.Contents >{el?.contents}</S.Contents>
            </S.MainWrapper>
            <S.OptionWrapper>
              {/* <S.UpdateIcon src="/images/boardComment/list/option_update_icon.png/" /> */}
              <AiOutlineEdit size={24} 
                 onClick={props.onClickUpdate}
              />
              <BiCommentMinus size={24} 
                 onClick={props.onClickDelete}
              />
            </S.OptionWrapper>
          </S.FlexWrapper>
          <S.DateString>{el?.createdAt}</S.DateString>
        </S.ItemWrapper>

내가 클릭한 댓글 사용자의 정보를 알기위해 id 값으로 사용자의 정보를 담는 writer를 넣어주고 클릭할때마다 

사용자의 정보를 보여줘야 한다. 이것을 이벤트 버블링을 사용해 하나에 부모에 id 값을 주면 그 아래 자식까지도 

적용이 될 수 있다.