Styled Component

jhplus13·2022년 5월 18일
0

React

목록 보기
15/17

공식페이지 : https://styled-components.com/docs/basics

react에서 css 적용하는 방법

  1. 직접 jsx코드에 적어주는 방법
  2. style.module.css 파일을 만들고, className으로 사용하는 법
  3. styled component

1. 설치

npm i styled-components

2. 코드 자동완성 기능

vscode-styled-components Extension 설치

3. Styled Component 기본사용예제

// 1. styled를 import 함.
import styled from "styled-components";

// 2.html코드와 css코드를 사용해, 컴포넌트로 한번에 생성함.
// 변수명은 대문자로 해야함. (컴포넌트니까!)
const Father = styled.div`
  display: flex;
`;

const Box1 = styled.div`
  width: 100px;
  height: 100px;
  background-color: teal;
`;

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

const Text = styled.span`
  color: white;
  font-size: 30px;
`;

// 3. 컴포넌트 구현
function App() {
  return (
    <Father>
      <Box1>
        <Text>aaaa</Text>
      </Box1>
      <Box2>bb</Box2>
    </Father>
  );
}

export default App;

→ 출력결과

4. props , 컴포넌트 확장

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

 // 1-2. 그 props를 컴포넌트에서 받아 사용함.
 // 파라미터를 받는 함수를 적어줌. // props = {bgcolor : "teal"} 인 것!
const Box = styled.div`
  background-color: ${(props) => props.bgcolor};
  width: 100px;
  height: 100px;
`;

// 2-1. 컴포넌트 확장 : 기존의 컴포넌트의 모든 것 + 새로운것 더함
// 기존의 Box 컴포넌트에 새로운 css 추가함.
const Circle = styled(Box)`
  border-radius: 50%;
`;

const Text = styled.span`
  color: white;
  font-size: 30px;
`;

function App() {
  return (
    <Father>
      {/*1-1. props를 통해 컴포넌트에 데이터를 보냄, */}
      <Box bgcolor="teal">
        <Text>aaaa</Text>
      </Box>
      {/* 2-2. Circle은 Box의 모든 것을 받고있는데, Box에서 propd으로 bgcolor 값을 받고있음. 
       따라서 Circle에도 prop으로 bgcolor을 줄 수 있는 것임.
      */}
      <Circle bgcolor="tomato"></Circle>
    </Father>
  );
}

export default App;

→ 출력결과

5. As

  • as : 컴포넌트에서 html요소만 바꿔서 사용하는 법

  • 코드예제
    : Btn컴포넌트에서 요소만 a요소로 바꿔서 사용함.

import styled from "styled-components";

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border-radius: 15px;
  padding: 10px 20px;
  font-size: 20px;
`;

function App() {
  return (
    <>
      <Btn>click</Btn>
      <Btn as="a" href="http://www.navercom">
        click
      </Btn>
    </>
  );
}

export default App;

→ 출력결과

6. Attrs

  • Attrs : 컴포넌트에서 요소의 속성을 객체에 담을 수 있음

  • 코드예제
    : 5개의 input요소에 속성을 각각 지정하지 않아도, Input컴포넌트에서 한번에 속성을 지정하여 사용할 수 있음.

import styled from "styled-components";

const Input = styled.input.attrs({ required: true, minLength: 5 })`
  background-color: teal;
`;

function App() {
  return (
    <>
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </>
  );
}

export default App;

→ 출력결과

7. Animations

  • Styled Component에서 animations적용하는 법
import styled from "styled-components";
import { keyframes } from "styled-components";

// 1. keyframes``를 만듦
const Ani = keyframes`
  0%{
   transform: rotate(0);
   border-radius: 0;
  }
  50%{
 
    border-radius: 100px;
  }
  100%{
    transform: rotate(360deg);
   border-radius: 0;
  }
`;

const Div = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  animation: ${Ani} 1s linear infinite;
// 2.컴포넌트 만들 때, 위에서 만든 keyframes를 갖다 씀.
`;

function App() {
  return (
    <>
      <Div></Div>
    </>
  );
}

export default App;

8.컴포넌트에서 자식요소를 target 하는 법

방법1. 컴포넌트 안에있는 (컴포넌트가 아닌)다른 자식요소를 target하는 법

  • Div컴포넌트에서 div요소의 자식 요소인 span를 선택할 수 있음.
    (span은 컴포넌트가 아님)

  • 따라서 모든 요소를 다 컴포넌트로 만들 필요는 없음.

import styled from "styled-components";

const Div = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: yellowgreen; 
 
// [방법1] Div컴포넌트 안에서 자식요소인 span요소 지정하기
  span {
    font-size: 40px;
  }
`;

function App() {
  return (
    <Div>
      <span>❤️</span>
    </Div>
  );
}

export default App;

방법2. 컴포넌트 안에있는 (컴포넌트인)다른 자식요소를 target하는 법

  • Div컴포넌트에서 div요소의 자식 요소인 Span 컴포넌트를 선택할 수 있음.
import styled from "styled-components";

const Span = styled.span`
  font-size: 40px;
`;

const Div = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;

  // [P2] Div컴포넌트 안에서 자식요소인 Span컴포넌트
  ${Span} {
    font-size: 60px;
  }
`;

function App() {
  return (
    <Div>
      <Span>❤️</Span>
    </Div>
  );
}

export default App;

9. 가상 선택자(Pseudo selector)

  • &를 쓰면 자기 자신요소를 지칭하게 됨.
  • span:hover{} 로 쓰지 않고, span{}안에서 &를 쓰면 span을 지칭하게 됨.
import styled from "styled-components";

const Div = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;

  // div 자기 자신요소를 지칭
  &:active {
    background-color: gray;
  }

  span {
    font-size: 60px;
    // span 자기 자신요소를 지칭
    &:hover {
      opacity: 0.2;
    }
  }

  /* 이 코드와 같음
    span:hover {
    opacity: 0.2;
  } */
`;

function App() {
  return (
    <Div>
      <span>❤️</span>
    </Div>
  );
}

export default App;
profile
making-dev

0개의 댓글