React styled-component 형제버튼들 중 하나만 클래스 줄 때

상황

-리액트로 styled-component를 사용하여 버튼 커스텀

 

styled-component를 사용하지 않고 일반적인 버튼태그(<button onClick={함수}/>) 로 사용하는 경우,

그리고 버튼태그에 기본클래스, 선택한 태그에 넣을 클래스 이 두가지만 있거나 선택한 태그에 넣을 클래스만 필요한 경우에는

아래와 같이 하면 된다.

const 함수 = (e) => {
        const siblings = t => [...t.parentElement.children].filter(e => e != t);
        siblings(e.target).map((x)=>{
            x.setAttribute('class','');
        });
        e.target.classList.add("on");
    }

const siblings = t => [...t.parentElement.children].filter(e => e != t); <<< 이 부분은 아직도 아리송하지만..

siblings(e.target)는 내가 선택한 버튼의 형제들의 배열이다.

map으로 돌리면 x, 배열 안의 하나하나가 태그로 감싸진 형식으로 나타나는데

이때 setAttribute('class',클래스명) 을 사용하면 모든 형제들에게 동일한 클래스를 줄 수 있다.

 

위의 코드는 내가 선택한 녀석의 형제의 클래스를 없애고 선택한 녀석에게만 on 클래스를 주었다. 

 

그런데 styled-component 를 사용하면? 위의 방법은 이미 널리 퍼진 방법이라 시도해본 사람이 이 글을 볼터라 생각하고 예시 이미지는 귀찮아서..안찍었지만^^

저대로 하면 형제 태그가 그냥 사라진다. 왜?

styled-component는 리액트로 보면 그냥 buttom, div, section 같은 '이름'만 바뀐것처럼 보이지만

실제로는 새로운 클래스를 주고 그 클래스에 css를 넣은것이다.

 

이럴때, 

const 함수 = (e) => {
        const siblings = t => [...t.parentElement.children].filter(e => e != t);
        siblings(e.target).map((x)=>{
            console.log(x.classList)
        });
        e.target.classList.add("on");
    }

콘솔로 형제놈들을 하나하나 찍어서 그들의 클래스리스트를 보라.

대충 이렇게 나올것이다.

보면 알겠지만.. 0번 1번이 합쳐진게 2번 value에 들어간 값이다.

저게 바로 styled-component가 생성한 클래스이다. 아마 사람마다 다르겠지만..

 

아하! 그럼 x.setAttribute('class',x.classList[2]); 를 사용하면 되겠군!

근데 맨 위에 보였던 코드에 이걸 그대로 넣으면.. 내가 선택한 놈 빼고 또 다 없어진다.

애초에 이런저런 오류가 있을 수 밖에 없다. on이 들어간 순간 x.classList[2] 는 on 이 될테니까.

그럼? 그냥 on 들어간 형제놈 찾아서 원래 클래스로 바꿔주면 된다. 

이때 if 문이 빛을 발한다. 

 

const siblings = t => [...t.parentElement.children].filter(e => e != t);
        siblings(e.target).map((x)=>{
            if(x.classList[2] === "on"){
                x.setAttribute('class',x.classList[3])
            }
        });
        e.target.classList.add("on")
        }

on이 들어간 형제놈만 찾아서 클래스를 기존의 것으로 바꿔준다.

이러면 저 위의 gif처럼 잘 작동한다!

 

 

만약... 형제들중 하나에게 다른 용도로 클래스를 주었다면 이 방법은 쓰지 못한다.

이 방법은 같은 용도이며 형제위치에 있는 버튼들중 하나만 선택하기 위해 사용하는것!

다른 방법을 찾겠다면..머.. 하나하나 골라서 선언해주고 그 중에 지금 선택한것 외에 on 이 들어간것의 클래스에서 on을 빼준다~ 이럴수도 있겠지만? 이 글은 그것까진 안적는다. 그런건 안써봤으니까!!

 

그럼 20000