Styled-components

 

 React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리입니다.
이 라이브러리를 사용하면 JavaScript 파일 안에서 CSS를 작성할 수 있습니다.
이러한 방식은 컴포넌트 지향 아키텍처와 잘 어울리며,
CSS를 컴포넌트와 함께 유지 및 관리할 수 있도록 도와줍니다.

styled-component 는 제가 제일 좋아하는 CSS-in-JS 라이브러리 입니다.  그리고 제가 가장 많이 쓰는 css 스타일 방법 중에 하나입니다. 하지만 문득 내가 진짜 styled-component 를 재대로 사용하고 있는 것이 맞을까?? 라는 의문이 생겼습니다. 그래서 좀더 자세히 공부를 하다 보니 제가 모르는 부분이 많다는 것을 느껴 제대로 styled-component 를 정리할 겸 이러한 정보들을 공유하기 위해 만들어 보았습니다.

설치

npm install styled-components

 

사용해보기

사용법은 css 를 사용하고 있을때와 크게 다르지 않습니다.

import styled from "styled-components";

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 15px;
`;

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

export default App;

 

확장

만약 똑같은 styled component 에 각기 다른 배경색을 추가하고 싶다면 어떻게 해야 할까요?

똑같은 styled component 를 만들고 배경만 다르게 만들면 중복 코드가 발생해 코드의 가독성이 안좋아집니다.

그럴 때 사용할 수 있는 방법이 확장 입니다.

css 구조가 거의 동일한데, 몇가지 속성만 다른 경우 사용합니다.

 

 

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

function App() {
  return (
    <Container>
      <Box bgColor="royalblue" />
      <Box bgColor="deeppink" />
    </Container>
  );
}

 

bgColor 라는 이름은 개발자 마음대로 이름을 정해줄 수 있습니다. 

이렇게 정해준 이름은 styled 안에서 props 로 꺼내줄 수 있습니다.

 

 

상속 확장

상속 확장은 다른 styled component 의 스타일을 상속받아 css 를 더 추가하고 싶을 때 사용합니다.

기존에 있던 css 스타일에 border, outline 같은 css 스타일도 추가하고 싶을 때 사용하죠.

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

const BigBox = styled(Box)`
  padding: 30px;
  color: white;
`

function App() {
  return (
    <Container>
    
      <Box bgColor="royalblue" />
      <Box bgColor="deeppink" />
      
      <BigBox bgColor="red"/>
      
    </Container>
  );
}

 

태그 변경을 위한 확장

기존의 styled component 가 <p> Tag 일 때 해당 스타일을 그대로 쓰는 <span> Tag 를 쓰고 싶다면 새로 만들어야 할까요???

만약 새로 만들게 되면 <p> Tag 인 styled component 와 <span> Tag 인 styled component 의 코드가 중복되는 상황이 발생하게 됩니다.

 

해결 방법은 태그 변경을 위한 확장입니다.

const Text = styled.p`
  color: purple;
  font-size: 2rem;
  font-weight: bold;
`;

function App() {
  return (
    <>
      <Text>Hello</Text>
      <Text as="span">Home</Text>
    </>
  );
}

 

as 속성을 부여함으로써 <Text> 라는 <p> 를 <span> 으로 만들어 줍니다.

 

태그 속성 기본값 설정

<input>, <a> Tag 들의 경우에 기본값으로 설정해야 하는 속성들이 있습니다.

예를 들어 <input> 에 경우 type="text" 가 있을 것이고, <a> 는 alt="#" 이 있겠죠.

개발을 하다 동일한 스타일의 <input type="text"/> 를 사용한다면 type="text" 를 계속 써주어야 하는 귀찮음이 있습니다.

styled-components 는 이러한 귀찮음을 해결할 수 있게 도와줍니다.

import styled from 'styled-components';

const CustomInput = styled.input.attrs(props => ({
  type: 'text',
  placeholder: props.placeholder || 'Enter text here',
}))`
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
`;

const CustomImage = styled.img.attrs({alt: 'This is an image'})`
  width: 300px;
  height: 300px;
`
const App = () => {
  return (
    <div>
      <CustomInput placeholder="Type something..." />
      <CustomImage src="image.jpg" />
    </div>
  );
};

 

애니메이션 추가

styled-components 에 애니메이션을 추가하려면 keyframes 을 import 해주어야 합니다.

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

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
`;

const Elem = styled.div`
  background-color: royalblue;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  animation: ${rotate} 3s linear infinite;
`;

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

 

상태 선택자

개발을 하다 보면 hover, active 같은 상태에 따라 스타일을 적용하고 싶을 때가 있을 것입니다.

그럴때 &를 통해 자기자신에 대한 css를 추가적으로 정의할 수 있습니다.

const List = styled.li`
  color: black;
  &:hover {
	color: white;
  }
`;

 

TSX 를 사용하고 있을 때 styled-components

npm i --save-dev @types/styled-components

 

많은 개발자들이 JSX 로 개발하지만 어떤 사람들은 TypeScript 를 이용해서 개발하는 사람들도 있습니다.

그 때 styled-component 의 props 같은 속성을 사용하게 된다면 Type 속성을 정의해 주어야 합니다.

 

interface TextData {
  bgColor: string;
  color?: string;
}

const Text = styled.p<TextData>`
  background-color: ${(props) => props.bgColor}
  color: purple;
  font-size: 2rem;
  font-weight: bold;
`;

function App() {
  return (
    <>
      <Text bgColor="orange">Hello</Text>
    </>
  );
}

 

이렇게 interface 를 이용해서 styled component 에 들어갈 타입을 정의해 줄 수 있고, 

타입을 정의해 주어야 Error 가 발생하지 않습니다.

 

개발을 하다 보면 그때 그때 필요한 정보들을 찾고 쓴 뒤에 기억속에서 사라져 버리기 때문에 이렇게 정리하는 

습관도 나쁘지 않다고 생각합니다. 정리할 때는 시간이 많이 걸리지만 이것도 쌓이고 쌓이면 제 커리어에 

많은 도움을 주지 않을까 싶습니다. 😊😊😊😊😊😊😊