Styled-Component

jhplus13ยท2022๋…„ 2์›” 22์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
8/28

๐Ÿ”ถ๊ธฐ๋ณธ ์‚ฌ์šฉ

  • ํ˜•ํƒœ: styled.html์š”์†Œ'css์ฝ”๋“œ'
import styled from "styled-components";

const Box = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

function practiceApp() {
 return (
      <>
        <Box />
        <Box />
      </>
 );}

๐Ÿ”ถ prop์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค์ •

  • styled component์—์„œ props์„ ๋ฐ›๋Š” ๋ฒ•: ${(props) => props.bgColor};
import styled from "styled-components";

{/* 2.`${}` ์ด ํ˜•์‹์„ ์ด์šฉํ•ด ํ…œํ”Œ๋ฆฟ ์•ˆ์— ๋„ฃ์€ prop์„ style์ปดํฌ๋„ŒํŠธ์—์„œ ์ถ”์ถœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋จ.*/}
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function practiceApp() {
 return (
      <>
	{/* 1.props๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋ƒ„ */}
        <Box bgColor="teal"/>
        <Box bgColor="tomato" />
      </>
 );}

๐Ÿ”ถ ๊ธฐ์กด์˜ ์‚ฌ์šฉํ•˜๋˜ ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ CSS ์†์„ฑ์„ ์ถ”๊ฐ€ ์ ์šฉ.(์ปดํฌ๋„ŒํŠธ ํ™•์žฅ)

:ํ™•์žฅํ•˜๋ ค๋Š” ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ ๊ด„ํ˜ธ์•ˆ์— ๋„ฃ์œผ๋ฉด ๋จ. ๊ธฐ์กด Box์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™•์žฅํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋จ.

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`
  border-radius: 50%;
`;

function practiceApp() {
  return (
    <>
      <Box bgColor="gray" />
      <Circle bgColor="teal" />
    </>
  );
}

๐Ÿ”ถ ๊ธฐ์กด ์ปดํฌ๋„ŒํŠธ์—์„œ ์—˜๋ฆฌ๋จผํŠธ๋งŒ ๋‹ค๋ฅธ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๊ต์ฒด.

: ๊ธฐ์กด ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ์—์„œ, buttonํƒœ๊ทธ๋ฅผ aํƒœ๊ทธ๋กœ๋งŒ ๋ฐ”๊ฟ” ์‚ฌ์šฉ.

import styled from "styled-components";

const Btn = styled.button`
  color: wheat;
  border-radius: 20px;
  background-color: yellowgreen;
`;

function practiceApp() {
  return (
    <>
      <Btn>log in</Btn>
      <Btn as="a" href="http://www.">log in</Btn>
    </>
  );
}

๐Ÿ”ถ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•œ๋ฒˆ์— ์†์„ฑ์„ ์ง€์ •ํ•˜๋Š” ๋ฒ•

  • ์ด๋ ‡๊ฒŒ ๊ฐ๊ฐ์— ์†์„ฑ์„ ์ง€์ •ํ•˜๊ธฐ ๋ณด๋‹จ, ์•„๋ž˜์ฒ˜๋Ÿผ ์ปดํฌ๋„ŒํŠธ์— ํ•œ๋ฒˆ์— ์†์„ฑ์„ ์ง€์ •ํ•ด ์‚ฌ์šฉํ•จ.
const InputEl = styled.input`
  background-color: #f1dede;
`;


function practiceApp() {
  return (
      <>
        <InputEl required maxLength={3} />
        <InputEl required maxLength={3} />
        <InputEl required maxLength={3} />
      </>
      );
}
  • ์ปดํฌ๋„ŒํŠธ์— ํ•œ๋ฒˆ์— ์†์„ฑ์„ ์ง€์ •ํ•ด์„œ ์‚ฌ์šฉ.
const InputEl = styled.input.attrs({ required: true, maxLength: 3 })`
  background-color: #f1dede;
`;


function practiceApp() {
  return (
      <>
        <InputEl />
        <InputEl />
        <InputEl />
      </>
      );
}
profile
Front-end Dev

0๊ฐœ์˜ ๋Œ“๊ธ€