특저 상태나 조건에 따라 스타일을 다르게 지정해주는 경우가 많이 있다.
Styled-Component를 사용할때 컴포넌트에 특정 상태나 조건을 props로 내려주고 스타일을 조건에 따라 각각 수정해서 사용했다.
간단한 토글을 만드는데 Styled-Component의 css를 사용 했을때와 안썻을때의 차이를 비교해 보자
import React, { useState } from 'react';
import styled, { css } from 'styled-components';
export default function Main() {
const [state, setState] = useState(false);
const toggleHandler = () => {
setState(!state);
};
return (
<Container>
<ToggleContainer onClick={toggleHandler} state={state}>
<div className="state">{state ? 'ON' : 'OFF'}</div>
<div className="block"></div>
</ToggleContainer>
</Container>
);
}
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
height: 100%;
`;
const ToggleContainer = styled.div`
background-color: aliceblue;
border-radius: 20px;
width: 80px;
height: 150px;
position: relative;
box-shadow: 0px 0px 0px 0px orange;
cursor: pointer;
transition: 0.3s;
div.state {
font-size: 24px;
text-align: center;
font-weight: 700;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
transition: 0.3s;
}
div.block {
position: absolute;
margin: 10px 0;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
background-color: lightgray;
border-radius: 10px;
width: 60px;
height: 40px;
transition: 0.3s;
}
/* 스타일컴포넌트의 프롭스를 받아서 모든 스타일을 조건에 따라 변경할 수 있다!*/
${({ state }) => {
if (state) {
return css`
background-color: yellow;
box-shadow: 0px 0px 100px 40px orange;
div.state {
color: red;
}
div.block {
bottom: 90px;
background-color: orange;
}
`;
}
}}
`;
동일한 프롭스에 따라 스타일을 달리하지만 각 항목마다 프롭스를 받아 변화를 주어야한다.
const ToggleContainer = styled.div`
background-color: ${({ state }) => (state ? 'yellow' : 'aliceblue')};
border-radius: 20px;
width: 80px;
height: 150px;
position: relative;
box-shadow: ${({ state }) =>
state ? '0px 0px 100px 40px orange;' : '0px 0px 0px orange'};
cursor: pointer;
transition: 0.3s;
div.state {
font-size: 24px;
text-align: center;
font-weight: 700;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
transition: 0.3s;
color: ${({ state }) => (state ? 'red' : null)};
}
div.block {
position: absolute;
margin: 10px 0;
bottom: ${({ state }) => (state ? '90px' : '0px')};
left: 50%;
transform: translateX(-50%);
background-color: ${({ state }) => (state ? 'orange' : 'lightgray')};
border-radius: 10px;
width: 60px;
height: 40px;
transition: 0.3s;
}
`;
css를 최근에 알게 되었는데 그동안 코들르 얼마나 비효율 적으로 짠건지 모르겠다. 이제 더 가독성이 좋고 반복이 덜한 코드를 짤 수 있게 됬다.