TIL 25_styled-components ๐
ํ์กดํ๋
CSS in js
๊ด๋ จ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ค ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฉด์ CSSํ์ผ์ ๋ง๋ค์ง ์์๋ ์ปดํฌ๋ํธ๋ด์์ ๋ฐ๋ก CSS์ฒ๋ฆฌ๋ฅผ ํด์ค ์ ์๊ธฐ ๋๋ฌธ์ ํจ์จ์ ์ด์ด์ ์ ์ ์ธ๊ธฐ๊ฐ ๋ง์์ง๋styled-components
์ ๋ํด ์์๋ณด์!
styled components
styled components
๋ javascript์์ css๋ฅผ ์ฌ์ฉ ํ ์ ์๋๋ก ๋์์ฃผ๋ ์คํ์ผ๋ง ํ๋ ์์ํฌ์ด๋ค. React Component์ ํน์ ์คํ์ผ๋ง์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ฌ์ฉ์ฑ์ ๋ ๋์ผ ์ ์๊ณ , javascript์ ์ํฅ์ ๋ฐ๋ ์คํ์ผ๋ง์ ๊ฐํธํ๊ฒ ๊ตฌํ ํ ์ ์๋ค.
์ฌ์ฉ ์์
๊ธฐ์กด ๋ฐฉ์ (CSS)
const divStyle = {
backgroundColor: "black",
width: "100px",
height: "100px",
};
return <div style={divStyle}></div>
styled-components ๋ฐฉ์
const StyledDiv = styled.div`
background-color: black;
width: 100px;
height: 100px;
`;
return <StyledDiv></StyledDiv>
์ฅ์ ๐
1. component ๋จ์ ์คํ์ผ๋ง
styled-components
๋ก ์์ฑ๋ Components๋ค์ ๋น๋ํ๋ฉด ์์์ ํด๋์ค ๋ค์์ ์คํ์ผ์ด ์ ์ฉ๋์ด ์๋ ๊ฒ์ ํ์ธ ํ ์ ์๋ค. styled-components
๋ ์ค๋ณต๋์ง ์๋ ํน์ ํด๋์ค ๋ค์์ ์์ฑํด ์คํ์ผ์ ์ ์ฉํ๊ธฐ ๋๋ฌธ์, ํด๋์ค ๋ค์์ด ์ค๋ณต๋๊ฑฐ๋ selector์ ์ฐ์ ์ ์ฉ ์์ ๋๋ฌธ์ css ์คํ์ผ๋ง์ด ํผ์ ์ ์ผ์ผํค๋ ์ฌ๊ณ ๋ฅผ ๋ฐฉ์ง ํ ์ ์๋ค.
2. ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง
const StyledDiv = styled.div`
background-color: black;
width: 100px;
height: 100px;
${({ login }) => {
return login ? `display: none` : null;
}}
`;
return <StyledDiv login={true}></StyledDiv>;
styled-components
๋ Component์ props
๋ฅผ ์ ๋ฌ๋ฐ์ ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ค.
ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด ๋ด์์ javascript๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ ๊ฐ์ ํ์์ด๋ฉฐ, ๋ด๋ถ์์ ์ ์ธ๋ ํจ์๋ props๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ์คํ๋๋ค.
3. ํ์ฅ ์คํ์ผ๋ง
const Container = styled.div`
max-width: 600px;
width: 100%;
height: 100px;
`;
const BlackContainer = styled(Container)`
background-color: black;
`;
const RedContainer = styled(Container)`
background-color: red;
`;
return (
<>
<BlackContainer />
<RedContainer />
</>
);
styled-components
๋ ์๋ก์ด Component๋ฅผ ์ ์ธํ๋ ๊ฒ ๋ฟ๋ง ์๋๋ผ, ๊ธฐ์กด์ Component์ ์คํ์ผ์ ์ถ๊ฐํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. ํ์ฅ ์คํ์ผ๋ง์ ์ฌ์ฉํ๋ฉด ์ค๋ณต๋ ์ฝ๋ ์์ ์ค์ด๊ณ , ๋ถ์ฐ๋ ์คํ์ผ์ ์ผ๊ด์ ์ผ๋ก ๊ด๋ฆฌ ํ ์ ์์ด ์ ์ง๋ณด์ ๋น์ฉ์ ์ค์ผ ์ ์๋ค.
4. ์ค์ฒฉ ์ค์ฝํ
const StyledDiv = styled.div`
background-color: black;
width: 100px;
height: 100px;
p {
color: white;
}
`;
return (
<>
<StyledDiv>
<p>Title</p>
</StyledDiv>
<p>content</p>
</>
);
SASS์ ์ค์ฒฉ ์ค์ฝํ ๊ท์น์ ์ฌ์ฉํ ์ ์๋ค. ๋๋ถ์ ๋ด๋ถ์ ๋ชจ๋ component๋ฅผ styled-components
๋ก ์์ฑํ์ง ์์๋, ํ์ ์ปดํฌ๋ํธ์๊ฒ๋ง ์ ์ฉํ๊ณ ์ถ์ ์คํ์ผ์ ์ค์ฝํ ํํ๋ก ๊ตฌํ ํ ์ ์๋ค.
โ ๏ธ ์ฃผ์: ๋ชจ๋ SASS ๋ฌธ๋ฒ์ด ์ฌ์ฉ ๊ฐ๋ฅํ์ง ์๋ค!
์ถ์ฒ ๐
https://dkje.github.io/2020/10/13/StyledComponents/
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL 25_styled-components ๐), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@rhfovk/TIL-25styled-components์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค