[React] styled-compoenets

특징

style된 컴포넌트 정의

컴포넌트 함수안에 스타일을 써 줄 필요가 없다.
더욱 알아보기 쉬운 이름을 지을 수 있다.

아래는 Style을 지정한 StyledContainer를 생성한 예이다.

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  padding: 50px;
`;

function Container() {
  return <StyledContainer />;
}

export default Container;

props

props로 데이터 전달이 가능하다. (재사용성 증가)
아래는 props로 background를 각각 지정한 Box를 두 개 생성한 예이다.

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  padding: 50px;
`;

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

function Container() {
  return (
    <StyledContainer>
      <Box backgroundColor="teal" />
      <Box backgroundColor="tomato" />
    </StyledContainer>
  );
}

export default Container;

extend

기존 컴포넌트의 모든 요소를 유지하면서
새로운 컴포넌트로의 확장이 가능하다

아래는 Box 컴포넌트를 extend한 Circle을 생성한 예이다.

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  padding: 50px;
`;

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

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

function Container() {
  return (
    <StyledContainer>
      <Circle backgroundColor="teal" />
      <Circle backgroundColor="tomato" />
    </StyledContainer>
  );
}

export default Container;

as 속성

as 속성을 이용하여 html 태그명만 변경이 가능하다.

아래는 버튼의 모든 스타일을 extend한 a태그를 생성한 예이다.

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  padding: 50px;
`;

const Button = styled.button`
  color: tomato;
`;

function Container() {
  return (
    <StyledContainer>
      <Button>Log in</Button>
      <Button as="a">Log in</Button>
    </StyledContainer>
  );
}

export default Container;

속성 값 정의

html 태그의 속성값 또한 정의 가능하다.

아래는 requred:true, maxLength:10인 Input을 두개 생성한 예이다.

import styled from 'styled-components';

const StyledContainer = styled.div`
  display: flex;
  padding: 50px;
`;

const Input = styled.input.attrs({ required: true, maxLength: 10 })`
  background-color: beige;
`;

function Container() {
  return (
    <StyledContainer>
      <Input />
      <Input />
    </StyledContainer>
  );
}

export default Container;

애니메이션

애니메이션을 정의할 수 있다.
아래는 rotateAnimation을 Box 컴포넌트에 지정하여 생성한 예이다.

import styled, { keyframes } from 'styled-components';

const Container = styled.div`
  display: flex;
  padding: 50px;
`;

const rotateAnimation = keyframes`
  0% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 100px;
    background-color: transparent;
    background-color: aliceblue;
  }
`;

const Box = styled.div`
  width: 100px;
  height: 100px;
  background: teal;
  animation: ${rotateAnimation} 1s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
`;

function Animation() {
  return (
    <Container>
      <Box />
    </Container>
  );
}

export default Animation;

pseudo 선택자

pseudo 선택자를 이용할 수 있다.
아래는 Box컴포넌트 안에 있는 Emoji 컴포넌트를 선택하여 스타일을 지정해 준 예이다.

import styled, { keyframes } from 'styled-components';

const Container = styled.div`
  display: flex;
  padding: 50px;
`;

const rotateAnimation = keyframes`
  0% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  100% {
    transform: rotate(360deg);
    border-radius: 100px;
    background-color: transparent;
    background-color: aliceblue;
  }
`;

const Emoji = styled.span`
  font-size: 36px;
  &:active {
    opacity: 0;
  }
`;

const Box = styled.div`
  width: 100px;
  height: 100px;
  background: teal;
  animation: ${rotateAnimation} 1s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  ${Emoji}:hover {
    font-size: 100px;
  }
`;

function Animation() {
  return (
    <Container>
      <Box>
        <Emoji>🤔</Emoji>
      </Box>
    </Container>
  );
}

export default Animation;

출처

📝 nomadcoder react master class