[React] Styled-Components 정리

사용하는 이유 ?

css 모듈을 사용할 경우 가독성이 떨어지며, hover와 같은 속성을 사용할 수 없다.

styled-components 기본 사용 방법

import styled from "styled-components";

function App() {
  const Box = styled.div`
    background-color: skyblue;
  `;
  return (
    <Box>
    	// div와 같은 태그명 대신 styled-components로 선언한 네이밍을 사용
      <h1>Styled Components</h1>
      <p>Styled Components is cool</p>
    </Box>
  );
}

export default App;

props

jsx 구문에서 props를 설정해주면 styled는 이를 받아올 수 있다.

import styled from "styled-components";

function App() {
  const Box = styled(Box)`
    background-color: ${(props) => props.bgColor};
  `;
  return (
    <Box bgColor="snow">
    	// props 설정
      <h1>Styled Components</h1>
      <p>Styled Components is cool</p>
    </Box>
  );
}

export default App;

컴포넌트 확장

어떤 styled components를 가져와서 확장할 수 있다.

import styled from "styled-components";

function App() {
  const Box = styled.div`
    background-color: skyblue;
  `;
  const TextBox = styled(Box)`
    // Box component를 확장
    font-weight: 800;
    color: ${(props) => props.color};
  `;
  return (
    <TextBox color="snow">
      <h1>Styled Components</h1>
      <p>Styled Components is cool</p>
    </TextBox>
  );
}

export default App;

attribute 지정

태그 뒤에 .attrs({ }) 를 작성한 후
중괄호 안에 속성을 집어넣으면 된다.

  const Box = styled.input.attrs({ required: true })`
    background-color: skyblue;
  `;

Animation

import styled, { keyframes } from "styled-components";
// import keyframes

function App() {
  // animation은 keyframes 키워드를 사용한다.
  const animation = keyframes`
    from {
      transform: rotate(0deg);
    }
	to {
      transform: rotate(360deg);
    }
  `;
  const Box = styled.div`
	width: 100px;
	animation: ${animation} 2s linear;
	// 앞서 선언한 animation을 ${} 로 감싸서 사용한다.
  `;
  
  return (
    <Box color="snow">
      <h1>Styled Components</h1>
      <p>Styled Components is cool</p>
    </Box>
  );
}

export default App;

자식요소 선택

function App() {
  const Box = styled.div`
	background-color: skyblue;
	
	// scss 문법처럼 사용할 수 있다.
	&:hover { opacity: 0; }
	> :hover { opacity: .1; }
	span {opacity: .2;}
	span:hover {opacity: .3;}
  `;
  
  return (
    <Box>
      <span>Hello</span>
    </Box>
  );
}

scss에서는 자식요소를 가르킬 때, tag 외에도 클래스 명으로 자식 요소들을 선택할 수 있었다.

styled-components는 그런 방법이 없을까?

function App() {
  const Text = styled.span`
	color: snow;
  `;
  const Box = styled.div`
	background-color: skyblue;
	${Text}:hover { opacity: 0; }
	// components를 ${ } 안에 감싸넣어 활용할 수 있다.
  `;
  
  return (
    <Box>
      <Text>Hello</Text>
    </Box>
  );
}