๐คฉ React Styled Component๋ฅผ ํ์ฉํ ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ
1. ์์ํ๊ธฐ์ ์์์ ์ฌ์ฌ์ฉ ์ปดํฌ๋ํธ๋ ์ ์๊ฐ ๋ฌด์์ผ๊น์ ??
๋ง ๊ทธ๋๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ์ฌ์ฉํ๋ค๋ ๊ฐ๋ ์ด๋ผ๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค.
์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ํ๋ค๋ ๊ฒ์ ?
1. ์ค๋ณต์ ์ ๊ฑฐํด์ค๋ค.
2. ์ข ๋ ๊น๋ํ ์ฝ๋ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค.
์์ ๊ฐ์ ์ฅ์ ์ด ์์ง๋ง , ์ ๋ ๊ทธ๋์ ์ฌ์ฌ์ฉ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ์์์ต๋๋ค.
2. ๊ทธ๋์ ๋๋ ์ด๋ป๊ฒ ์ฝ๋๋ฅผ ์งฐ๋ ??
์ฌ์ค ์ฌ์ฌ์ฉ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด๋ผ ! ๋ผ๋ ๋ง์ ๋ธ๋ก๊ทธ๋ , ์ ํ๋ธ ์์ ๋ฑ์ ํตํด์ ์ถฉ๋ถํ ์ธ์งํ๊ณ ์์์ง๋ง ,
ํ์์ ์ ๊ฐ ์ง๋ ์ฝ๋๋ ์ฌ์ฌ์ฉ ์ปดํฌ๋ํธ๋ฅผ ๊ณ ๋ คํ์ง ์๊ณ ์ฝ๋๋ฅผ ์ง๊ณ ์์์ต๋๋ค.
๋จธ๋ฆฌ์์ผ๋ก ์ธ์ง๋ ํ๊ณ ์์ง๋ง , ๋ง์ ์ฝ๋๋ฅผ ์ง๋ฉด ์ด๊ณณ ์ ๊ณณ ์ค๋ณต์ด ๋ฐ์ํ๊ณ , ์์ผ๋ก ๋๊ฐ์ด ๋น์ทํ ์ปดํฌ๋ํธ๊ฐ ๋์๋ ๋ค์ CSS ์ฝ๋๋ฅผ ์ง๊ณ ์๋ ์ ์์ ์ ๋ณผ ์ ์์์ต๋๋ค.
๊ทผ๋ฐ ํ ๋๋ฒ์ด ์๋๋ผ ์ธ๋ฒ ๋ค๋ฒ ๋๊ฐ์ ์ฝ๋๋ฅผ ์น๋ค๋ณด๋๊น ์ด๋ฐ ์๊ฐ์ด ๋ค์์ต๋๋ค.
์ด ? ์ด๊ฑฐ ๋๊ฐ์ ์ ์ ์ง ๊ฑฐ๋ ๋์์ธ๋ ๊ทธ๋ ๊ณ ๋น์ทํ๊ฑฐ ๊ฐ์๋ฐ...?
๊ทธ๋ฌ๋ฉด ๋ฐ๋ก ์ปดํฌ๋ํธ๋ก ๋นผ์ ์๊น์ด๋ ํฌ๊ธฐ , ์ด๋ฐ ๊ฒ๋ค๋ง ๋ฐ๋ก ๋๊ฒจ์ ๊ณ์ ์ธ ์ ์์๊น ? ๋ผ๊ณ ์๊ฐ์ ํ๊ฒ ๋์๊ณ
๊ทธ๋์ ๋ดค๋ , ๋ธ๋ก๊ทธ๋ , ์ ํ๋ธ ์ง์๋ค์ด ๋ชจ์์ ธ์ ์ง์ ๋ง๋ค์ด ๋ณด๊ธฐ๋ก ํ์ต๋๋ค.
์ฌ์ฌ์ฉ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
์ผ๋จ ๋ฒํผ๋ค์ ๋ณด๋ฉด์ ์๊ฐํ๊ฒ ์ธ๋ก , ๊ฐ๋ก , ๋ฐฐ๊ฒฝ์ , ๊ธ์์ , ๊ธ์จ ํฌ๊ธฐ , ์ด ์ ๋๋ง ์ปค์คํ ํ ์ ์์ด๋ ์ค๋ณต์ด ๋ฐฉ์ง๋๊ฒ ๋ค๋ ๋๋์ด ๋ค์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ์ผ๋จ ๋ฒํผ ์ปดํฌ๋ํธ๋ฅผ ํ๋ ์๋ก ๋ง๋ค๊ณ , ํ์ ์คํฌ๋ฆฝํธ๋ผ๋ฉด Props๋ก ๋ฌด์์ ๋ฐ์ ์ง ์ ์๋ฅผ ํด์ค๋๋ค.
interface์ ? ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ํ ๋ widht๋ height ๊ฐ์ ์์ฑ๊ฐ๋ค์ ์ ์ค ์ ๋์๋๋ฐ ๊ทธ๋ ? ๊ฐ ์์ผ๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ค !
interface PropsType {
width?: string;
height?: string;
bgColor?: string;
color?: string;
fontSize?: number;
children?: string;
weight?: string;
onClick?: () => void;
}
๊ทธ๋ฆฌ๊ณ CustomButton ์ด๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๊ณ ์์์ ์คํ์ผ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด์ Button์ ๋ฆฌํด์ ํด์ค๋๋ค.
function CustomButton(props: PropsType) {
return <Button {...props}>{props.children}</Button>;
}
export default CustomButton;
์ด๋ ๊ฒ ๋๋ฉด ๋ฒํผ ์ด๋ฆ์ ์๋์ ๊ฐ์ด ์ฃผ๋ฉด ๊ทธ ๋ฒํผ์ด๋ฆ์ด {props.chidren} ์ผ๋ก ๋ค์ด๊ฐ์ ์ด๋ฆ์ ๋ฑ ๋ง๊ฒ ๋ฉ๋๋ค !
<CustomButton>๋ฒํผ์ด๋ฆ</CustomButton>
๊ทธ๋ฆฌ๊ณ {...props} ๋ถ๋ถ์ ์ ํฌ๊ฐ props๋ก ๋ฐ์ ์์ฑ๋ค์ ์คํ์ผ๋ ์ปดํฌ๋ํธ์ ๋๊ฒจ์ฃผ๋ ์ญํ ์ ํด์ค๋๋ค.
Button StyledComponent ๋ถ๋ถ
const Button = styled.button<PropsType>`
border: none;
margin: 1rem;
border-radius: 1rem;
cursor: pointer;
font-weight: ${(props) => (props.weight ? props.weight : '400')};
width: ${(props) => (props.width ? props.width : '12rem')};
height: ${(props) => (props.height ? props.height : '6rem')};
font-size: ${(props) => (props.fontSize ? props.fontSize : '1.5rem')};
background-color: ${(props) => (props.bgColor ? props.bgColor : 'white')};
color: ${(props) => (props.color ? props.color : 'black')};
&:hover {
transform: scale(0.98);
}
`;
๋ง์ฝ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ ๋ค๋ฉด styled.button<Type๋ฃ์ด์ฃผ์ธ์!> ์ ํฌ๊ฐ ์์์ ์ ์ํ๋ interface ํ์ ์ ๋ฃ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค !
๊ทธ๋ฆฌ๊ณ ์คํ์ผ ์ปดํฌ๋ํธ๋ก ๋์ด์จ props ์์ฑ๋ค์ด props์ ๋ด๊ฒจ์์ต๋๋ค.
๊ทธ props๋ฅผ ์ผํญ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํด์ ๋ง์ฝ props.์์ฑ๊ฐ ์ด ์์ผ๋ฉด ๋ฐฐ๊ฒฝ์ ๋ ธ๋์ , ์์ผ๋ฉด ํ๋์ ์ด๋ฐ์์ผ๋ก ์์ฑ๊ฐ์ ์ง์ ํด ์ค ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ฉด ์ ์ฝ๋๋ฅผ ์ด์ฉํ ์์์ฝ๋๋ฅผ ๋ณด์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค !!
<CustomButton
height="4rem"
bgColor="#5de0e6"
color="white"
width="18rem"
weight="bold"
>
Login
</CustomButton>
์ด๋ฐ์์ผ๋ก ์์ฑ๊ฐ์ ์ฃผ๊ณ , ๊ทธ์์ chidren ๊ฐ์ ์ฃผ๋ฉด ๋ค๋ฅธ ์ฝ๋์์๋ ๊ณ์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์ฌ์ฌ์ฉ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค !
๐ ๊ฒฐ๊ณผ !
์ด๋ฒ์ ์ปค์คํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด ๋ณด๋๊น ์ด๋ค์์ผ๋ก ๋ง๋ค์ด์ผ ํ๋์ง ๊ฐ์ด ์กํ๊ฑฐ ๊ฐ๊ณ ,
์์ผ๋ก ๋ฌด์์ CSS๋ก ์ฐ์ด๋ด๋๊ฒ ์๋๋ผ ๋ด๊ฐ ๋ง๋๋ ์ปดํฌ๋ํธ๊ฐ ๋ฏธ๋์ ๋ ์ฐ์ผ ๊ฐ๋ฅ์ฑ์ด ์๋์ง ? ์๋๋ฉด ๋ค๋ฅธ ์ถ๊ฐ์ ์ผ๋ก ํ์ฅ์ด ๊ฐ๋ฅํ์ง ? ์๊ฐ์ ํ๋ฒ ๋ ํด๋ณด๋ ๊ณ๊ธฐ๊ฐ ๋ ๊ฒ ๊ฐ์ต๋๋ค !
'FrontEnd > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] ๋ชจ๋ ๊ฐ์ ๋ฐ๋ฅธ ์์ ๋ก๊ทธ์ธ ๋ฒํผ ๋ง๋ค๊ธฐ (+๋ฆฌํฉํ ๋ง) (0) | 2022.09.12 |
---|---|
[React] Vite SVG ์ปดํฌ๋ํธ๋ก ๋ถ๋ฌ์ค๊ธฐ (TypeScript ์ค์ ์ถ๊ฐ) (0) | 2022.07.25 |
cannot appear as a descendant of ์๋ฌ (0) | 2022.02.26 |
[React] ๊ตฌ์กฐ๋ถํด ํ ๋น ์ด์ฉํ useState() ๋ฆฌํฉํ ๋ง (0) | 2022.02.25 |
[React] styled-components , styled-reset (0) | 2022.02.20 |