[React] 문제해결: e.target의 className 가져오기 실패 => classList인덱스로 가져오기 or 그냥 id쓰기 (+DOMTokenList)

240209 

 

뉴스피드 팀 프로젝트를 진행하며

현재 header의 nav에서 선택된 카테고리에 맞춰 해당 카테고리 리스트 항목을 뜨게하는 기능을 구현하고 있었다.

아직 엉성한 초안 ㅠㅠ 아래는 이름이 나와서 잘랐 ..따. 여튼 팝을 누르면 팝 음악에 대한 항목이, 클래식/재즈를 누르면 해당 음악 항목이 뜨게 하는 것!

 

이전에 배웠던 기능이라 잘 구현할 수 있었는데, 아직 redux도 익숙치않지만 배웠던 대로 쓰니 잘 되었다.

하지만 !!

 

나는 선택된 해당 태그 (여기서 Tab) 의 textContent (태그사이 텍스트) 를 가져오길 원치않았고 

(배운 내용에서는 카테고리를 선택하면, 클릭이벤트로 - event.target.textContent를 가져오는 식이었다) 

 

선택된 태그의 className으로 가져오고 싶었다.

const Header = () => {
    const activeCategory = useSelector((state) => state.category);
    const dispatch = useDispatch();

    const onActiveCategory = (e) => {
        if (e.target === e.target.currentTarget) return;
        // console.dir(e.target); // 확인해보니 e.target의 className이 className: "sc-dQmiwx fhIQdM 팝"
        dispatch(setCategory(e.target.className));
        //console.log(activeCategory);
    };

    return (
        <HeaderWrapper>
            <div>
                <img src={logoImg} width={300} alt="logo" />
            </div>
            <MainNav>
                <TabsWrapper onClick={onActiveCategory}>
                    <Tab className="팝" $isActive={activeCategory}>
                        팝
                    </Tab>
                    <Tab className="클래식및재즈" $isActive={activeCategory}>
                        클래식 / 재즈
                    </Tab>
                </TabsWrapper>

 

그래서 e.target.className을 썼으나 문제가 있었다. 선택된 대로 기능이 되지 않아 콘솔로 확인해보니

팝 이라는 카테고리를 택했을 때 e.target.className이 , 내가 부여한 className="팝" 이 아니라,

className: "sc-dQmiwx fhIQdM 팝"

이런 이상한 문자열?! 로 뜨는 것이었닷..!!

 

e.target 을 콘솔로 확인해보았다. 

(참고로 여기서 console.log로 그냥 확인하면 해당 <li> 태그 - HTML 태그 body 내용만 뜬다.

DOM JS 객체의 전체 표현을 보려고 할 때 유용하다는, console.dir 를 써야 원하는 객체 내용을 다 볼 수가 있다)

 

 

e.target 객체 안에는, 자세히 보니 classList 키 안에 .. 잘은 모르겠지만 여튼 DOMTokenList에 3가지 요소가 있는 거 같았다. 내가 부여한 클래스네임은 인덱스 2번 요소인 듯 했다 ! 

(돔토큰리스트는.. 공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스 - .. 라는데 여튼 그런 토큰 집합 .. 여튼 아직 잘 모르겠다 . 담에 자세히 알아보는걸로..) 

 

console.dir(e.target.classList) 로 확인해보니 위 내용 DOMTokenList(3) [ ....   ] 이 그대로 떴고

console.log(e.target.classList[2]) 로 확인하니 정말로

 

내가 원하는, 클래스네임이 그대로 떴다 !

 

 

 const onActiveCategory = (e) => {
        if (e.target === e.target.currentTarget) return;
        console.log(e.target.classList[2]);
        dispatch(setCategory(e.target.classList[2]));
    };

    return (
        <HeaderWrapper>
            <div>
                <img src={logoImg} width={300} alt="logo" />
            </div>
            <MainNav>
                <TabsWrapper onClick={onActiveCategory}>
                    <Tab className="팝" $isActive={activeCategory}>
                        팝
                    </Tab>
                    <Tab className="클래식및재즈" $isActive={activeCategory}>
                        클래식 / 재즈
                    </Tab>
                </TabsWrapper>

 

그래서 위와같이, classList[2] 로 가져와주니  해당 카테고리 선택시 항목이 잘 떴다  *ㅇ*  편안 ,.. 😭

 

 

 

하지만 굳이 저렇게 해야하나 (?) 해서 그냥  id 를 부여해서 해주기로 했다 ㅎㅎ..

태그에 id 부여하고,  e.target.id 해서 가져오면 그냥 깔끔 !! 하다 ㅎㅎ