e.target 과 e.currentTarget 차이점과 쓰는 방식

오늘 상태값 수정하는 데 에러가 있어서 정확한 값을 넘겨줘야 하는데 시간을 잡아먹어서 한번 정리해보려 한다.

 

이벤트 발생시에 함수 처리하면서 값을 가져와야 했었는데 파일 구조가

  <li class="tab col s4">
    <a
     data-value="images"
     href="#imagesList"
     name="images"
     onClick={changeCategory}
     >   
     <i class="material-icons">image</i>
     </a>
  </li>
  <li class="tab col s4">
    <a
    data-value="videos"
    href="#videosList"
    onClick={changeCategory}
    name="videos"
    >
    <i class="material-icons">video_library</i>
   </a>
 </li>

이런 식의 탭에서 나는 a태그를 눌렀을 때와 icon태그를 눌렀을 때 각각 같은 값을 넘겨주는 작업을 하고있었다. 

   const changeCategory = (e) => {
            const target = e.target.name;
            console.log(target, "cate target");
        setContents({
            ...contents,
            category: target, // images, videos, pdfs 문자열 값이 넘어가야 했다. 
        });
    };
    
   const iconChangeCategory = (e) => {
            const target = e.target.id;  // icon 태그에 id 값을 images, videos 등으로 넘기려 함
            console.log(target, "cate target");
        setContents({
            ...contents,
            category: target, // images, videos, pdfs 문자열 값이 넘어가야 했다. 
        });
    };
    
    // ㅡㅡㅡㅡㅡㅡㅡㅡㅡ 위의 icon 태그에 추가 작업 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ//
        <i id="images" onClick={iconChangeCategory} class="material-icons">image</i>
    

이런 식으로 귀찮지만 2가지 함수를 만들어줘서 넘기려 했지만 정작 아이콘 밖의 a태그 영역을 눌렀을 때는 정상적으로 넘어갔지만 icon을 누르게 되면 2개 함수가 동시에 발동 되지만 a태그에 걸었던 함수에서는 정확히 인식을 하지 못해 undefined가 계속 떳었다. 건물 단면도를 생각했을 때 단순히 1층짜리 건물을 위에서 봤을때는 어느 집안 구조를 골라도 정상적으로 골라지겠지만 2층짜리 건물을 위에서 봤을 때 위에서 보면서 고르면 2층 구조(icon 태그)가 선택되는 것처럼 1층(a태그)은 제대로 골라지지 않았다. 

 

방법을 찾아보다가 currentTarget 을 알게 됬는데 이벤트 함수 걸어둔 태그에만 반응이 되게 하는 것이다. 즉 굳이  <a>, <i> 태그에 각각 이벤트를 넣어줄 필요없이, 게다가 같은 값을 넘겨주려 했기 때문에 감싸고 있는 <a>태그에만 함수를 설정해주면 되겠다.

 const changeCategory = (e) => {
            const target = e.currentTarget.name;  // 하위 태그에 이벤트를 안걸어두면 icon클릭해도 a태그가 입력되는 방법!
            console.log(target, "cate target");
        setContents({
            ...contents,
            category: target,
        });
    };
    
    
<li class="tab col s4">
<a
 data-value="images"
 href="#imagesList"
 name="images"
 onClick={changeCategory}
 >   
 <i class="material-icons">image</i>
 </a>
</li>

이런 식으로 훨씬 더 간단하고 깔끔하게 짤 수 있겄다. 

 

차이점: 1층 2층 복층 건물 단면도를 위에서 봤을 때 상황><

 

결론은 UI 상으로 겹쳐있을 때 태그 구조를 따져서 이벤트를 발생시킬 바깥 태그에 함수를 걸어서 하위 태그들이 클릭 되어도 무시해주는 용도로 쓰면 되겠당.