이벤트 버블링 막기: event.stopPropagation()

wrapper로 여러개의 a를 감싸서 버블링 막기 

a 태그를 반복 사용하는 경우 해당 요소들을 감싸는 links-wrapper를 만들고,

links-wrapper에 onClick={()=> event.stopPropagation()} 이벤트를 추가하여

모든 하위 a 태그에 영향을 미칠 수 있습니다.

      <div className="box" onClick={(e) => handleLinkClick(e, `https://www.youtube.com/watch?v=${videoId}`)}>
        <div className="body" onClick={(e) => e.stopPropagation()}>
          <div className="info">
            <div className="video-title">
              <a href={`https://www.youtube.com/watch?v=${videoId}`} target="_blank" rel="noreferrer">
                {title}
              </a>
            </div>
            <a href={`https://youtube.com/channel/${channelId}`} target="_blank" rel="noreferrer">
              <div className="channel-title">{channelTitle}</div>
            </a>
          </div>
        </div>
      </div>

=> a를 감싸고 있는 body div를 만들고 onClick 이벤트를 추가하여 하위 a 태그에 stopPropagation() 함수를 적용했습니다.