๐ ๋๊นกํ_05 : @emotion/styled - Passing Props
์งํ ์ํฉ
edit-profile.tsx
- my-page์์
ํ๋กํ ์์
๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ํ๋๋ ํ๋กํ์ ์์ ํ ์ ์๋ ํ์ด์ง - ์ ๋ ฅ์ฐฝ์ ๋ํ ๋ช ์ธ๋ ํ์๊ฐ์ ์ ํ๋กํ ์ค์ ๊ณผ ๋์ผ
add-product.tsx
- my-page์์
์ํ ๋ฑ๋ก
๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ํ๋๋ ์ํ ๋ฑ๋ก ํ์ด์ง
post.tsx
- ๊ฒ์๊ธ ํ๋จ์ ๋งํ์ ์์ด์ฝ์ ํด๋ฆญํ๋ฉด ๋ํ๋๋ ๋๊ธ์ ํ์ธํ๊ณ ์ ๋ ฅํ ์ ์๋ ํ์ด์ง
upload.tsx
- ํ๋จ์ ๋ค๋น๊ฒ์ด์
๋ฐ์์
๊ฒ์๊ธ ์์ฑ
์ ํด๋ฆญํ๋ฉด ๋ํ๋๋ ๊ฒ์๊ธ ์์ฑ ํ์ด์ง
list-chat.tsx
- ํ๋จ์ ๋ค๋น๊ฒ์ด์
๋ฐ์์
์ฑํ
์ ํด๋ฆญํ๋ฉด ๋ํ๋๋ ์ฑํ ๋ชฉ๋ก ํ์ด์ง - ์ฝ์ง ์์ ๋ฉ์์ง๊ฐ ์๋ ์ฑํ ๋ฐฉ์ธ ๊ฒฝ์ฐ ํ๋กํ ์ฌ์ง ์ข์ธก ์๋จ์ ์์ ์์ผ๋ก ํ์
UserAvatar ์ปดํฌ๋ํธ
- ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ์ ์ ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ์ปดํฌ๋ํธ๋ก ๋ง๋ค๊ธฐ
- ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ๊ฐ ํ์ด์ง์ ๋ฐ๋ก ์ ์ฉ
=> ๋ง์ ๊ณณ์ ํ๋กํ ์ด๋ฏธ์ง๊ฐ ์ฌ์ฉ๋๊ณ , ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ๋ค๋ฅด๋ค. - ๊ฐ ํฌ๊ธฐ์ ๋ฐ๋ฅธ ์ปดํฌ๋ํธ ์์ฑ
=> ์ด๋ฏธ์ง ํฌ๊ธฐ 42โ น42, 50โ น50, 110โ น110 ์ผ๋ก ๋ฐ๋ก ๋ง๋ฆ - ํ๋์ ์ปดํฌ๋ํธ๋ก ํ์ํ ๊ฐ์ props๋ก ์ ๋ฌํ์ฌ ์ฌ์ฉํ ์ ์๋๋ก ์์
- ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ๊ฐ ํ์ด์ง์ ๋ฐ๋ก ์ ์ฉ
// UserAvatar.tsx
import styled from '@emotion/styled';
import { COLORS } from '../constants';
type AvatarProps = {
size: string;
padding: string;
};
export const UserAvatar = ({ size, padding }: AvatarProps) => {
return (
<ImgProfile
size={size}
padding={padding}
src="/default-profile-w.png"
alt="์ฌ์ฉ์ ํ๋กํ ์ด๋ฏธ์ง"
/>
);
};
const ImgProfile = styled.img<AvatarProps>`
width: ${(props) => props.size};
height: ${(props) => props.size};
padding: ${(props) => props.padding};
border-radius: 50%;
background-color: ${COLORS.light_gray};
`;
- ์๋์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ฌ์ฉ์ ํ๋ ์ค์ธ๋ฐ, ํด๋น ์ปดํฌ๋ํธ๋ฅผ ์ ์ฉํ ๋๋ง๋ค ๊ฐ๊ฐ
size
์padding
๊ฐ์ ์ง์ ํด์ผ ํ๊ณ ๊ทธ๋ฌ๋ฉด์ ๊ฐ์ด ์๋ชป ์ ์ฉ๋์ด ์๋ ๋ถ๋ถ์ ์ฌ์ฌ์น ์๊ฒ ๋ฐ๊ฒฌํ ์ ์์๋ค...
=> ์์ ํ์^^
=> ์์ ํจ!
<UserAvatar size="30px" padding="6px" />
<UserAvatar size="40px" padding="5px" />
<UserAvatar size="90px" padding="10px" />
์ฝ๋ ์์ !
constants
๋๋ ํ ๋ฆฌ์index.ts
์USER_AVATAR
์ถ๊ฐ
export const USER_AVATAR = {
xs: {
size: '24px',
padding: '6px',
},
sm: {
size: '30px',
padding: '6px',
},
md: {
size: '40px',
padding: '5px',
},
lg: {
size: '90px',
padding: '10px',
},
};
- ์๋์ ๊ฐ์ด ์ฌ์ฉ
=> ์ด ์ ์ฝ๋์์๋ ๋ชจ๋UserAvata
์ปดํฌ๋ํธ์size
์padding
์ ๊ฐ์ ์ง์ ์ ๋ ฅ
=> ์ฝ๋ ์์ ํ constanst์ ๊ฐ ์ฌ์ด์ฆ์ ๋ํ ๊ฐ์ ๋ฏธ๋ฆฌ ์ ์ฅํด๋๊ณ ๊ทธ ๊ฐ์ ๊ฐ์ ธ์์ ์ฌ์ฉ
=> ์ค์๋ฅผ ์ค์ด๊ณ , ๊ฐ ์์ ์ด ์ฉ์ดํด์ง
<UserAvatar size={USER_AVATAR.xs.size} padding={USER_AVATAR.xs.padding} />
<UserAvatar size={USER_AVATAR.sm.size} padding={USER_AVATAR.sm.padding} />
<UserAvatar size={USER_AVATAR.md.size} padding={USER_AVATAR.md.padding} />
<UserAvatar size={USER_AVATAR.lg.size} padding={USER_AVATAR.lg.padding} />
์ฐธ๊ณ ๋งํฌ
@emotion/styled - Passing Props
=> props ์ ๋ฌ ๋ฐฉ๋ฒ์ ๊ตฌ๊ธ๋ง ํ์ผ๋ ๊ฒฐ๊ตญ์ ๊ณต์๋ฌธ์๋ฅผ ๋ณด๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์๋ค! (๋ฟ๋ฏ)
๋ง๋ฌด๋ฆฌ
- ๊ณต์๋ฌธ์ ๋ณด๋ ๊ฑฐ ์ซ์ดํ๋๋ฐ.. ์ด์ ์กฐ๊ธ ๊ด์ฐฎ
- ํ์ด์ง ๊ตฌํํ๋ฉด์ ๊ณ์ ์ปดํฌ๋ํธํ ํ๋ ์ค์ด๋ค.
์ฒ์์๋ ์ด๋ ๋ถ๋ถ์ ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด์ผ ํ๋์ง ์ ๋ชฐ๋๋๋ฐ, ์ผ๋จ ์ฝ๋ ์์ฑ์ ํ๋ค๋ณด๋ฉด ๋ฐ๋ณต๋๋ ๋ถ๋ถ์ด ๊ทธ์ ์์ผ ๋ณด์ธ๋ค.
=> ๊ทธ๋ฆฌ๊ณ ๋์์์ด ์ปดํฌ๋ํธ ์์ฑ...
=> ์ฝ๋๊ฐ ์ ๋ฆฌ๋๋ ๊ฑธ ๋ณด๋ฉด ๋ฟ๋ฏํด์ง๋ค์
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ ๋๊นกํ_05 : @emotion/styled - Passing Props), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@qhflrnfl4324/๋๊นกํ05์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค