[TIL] Tab 활성화

아티스트탭에서 아티스트를 클릭했을 때 어떤 탭이 활성화되었는지 
styled-components의 조건부 스타일링을 적용해보자.

 

클릭한 탭이 활성화되었는지 알기위해 조건부 스타일링을 적용하는 부분이 어려워서 적어본다.

export default function Tabs() {
		const [activeMember, setActiveMember] = useState("카리나")
	return (
    	<TabsWrapper>
        	<Tab $activeMember={activeMember}>111</Tab>
                <Tab $activeMember={activeMember}>222</Tab>
                <Tab $activeMember={activeMember}>333</Tab>
                <Tab $activeMember={activeMember}>444</Tab>
                <Tab $activeMember={activeMember}>555</Tab>
                <Tab $activeMember={activeMember}>666</Tab>
        </TabsWrapper>
    )
}

 

 

지금 클릭한 것이 어떤 상태인지 알기위해 props로 조건부 스타일링을 줘보자.

camelCase를 쓰는 경우에는 맨 앞에 $ 표시를 해서 $activeMember 이런식으로 붙여줘야한다.

 

이걸 이제 어떻게 받을 수 있을까?

const Tab = styled.li`
	${(props) => {
    	if(props.$activeMember === props.children) {
        	return css`
            	background-color: purple;
                color: white;
            `;
        }
        return css`
        	background-color: black;
            	color: white;
        `;
    }}
`;

 

 

props.children은 태그의 자식으로 들어있는 것이 props다.

props.$activeMember가 props.children과 같으면 ! 

 

 

그리고 click eventHandler를 실행해보자.

 

export default function Tabs() {
		const [activeMember, setActiveMember] = useState("카리나");
        
        const onActiveMember = (event) => {
        // Tab 부분에서 벗어나서 TabWrapper쪽을 선택했다면 무시해라.
        	if(event.target === event.currentTarget) return;
            
            	setActiveMember(event.target.textContent)
        }
	return (
    	<TabsWrapper onClick={onActiveMember}>
        	<Tab $activeMember={activeMember}>111</Tab>
                <Tab $activeMember={activeMember}>222</Tab>
                <Tab $activeMember={activeMember}>333</Tab>
                <Tab $activeMember={activeMember}>444</Tab>
                <Tab $activeMember={activeMember}>555</Tab>
                <Tab $activeMember={activeMember}>666</Tab>
        </TabsWrapper>
    )
}

 

 

const Tab = styled.li`
	${(props) => {
		if (props.$activeMember === props.children) {
			return css`
				background-color: purple;
				color: #f5f5f5;
				transition: all 0.5s;
			`;
		}
		return css`
			background-color: black;
			color: #f5f5f5;
		`;
	}}

	font-size: 21px;
	border-radius: 5px;
	width: 7.7rem;
	height: 2rem;
	padding: 0.3rem;
	text-align: center;
	cursor: pointer;
`;

 

 

이렇게 했더니 내가 클릭한 탭이 활성화될 때 보라색 배경이 떴다. 

 

onClick과 activeMember를 설정해서 탭을 활성화시켜도 지정한 탭이 활성화가 안됐었는데 뭐가 문제일까 게속 찾아보다보니

내가 그 전 코드에서 user-selector: none;을 해놨어서

아무리 클릭을해도 tab이 선택이 안되는 것이었다...ㅜㅜ

다른 글자가 틀린줄알고 한참을 찾았네..

동작을 먼저 생각하고 코드를 쓰는 습관을 들여야겠다..