TIL] 스타일 컴포넌트

스타일 컴포넌트

스타일 컴포넌트는  컴포넌트 스타일링 기법 중 하나입니다.

스타일 컴포는 터는 CSS-in-JS 라이브러리 중 하나이며

컴포넌트에 스타일을 직접 입히는 방식이라고 생각하시면 됩니다!

스타일 컴포넌트의 장점

스타일 컴포넌트를 사용하면 클래스 이름을 짓지 않아도 괜찮습니다.

또한 컴포넌트에 스타일을 적기 때문에 간단하면서 직관적입니다.

스타일 컴포넌트 패키지 설치하기

yarn add styled-components

위의 코드를 입력하시면 패키지가 설치됩니다.

패키지를 설치하시고 임포트를 해주시면 됩니다.

import styled from 'styled-components';

스타일 컴포넌트 사용하기

const Example = styled.div`
  display: flex;
  flex-direction: column;
  max-width: 350px;
  height: 100%;
  background-color: #FFAAAF;
  padding: 5px;
  margin: 0px auto;
  border : 1px;
  & p{
    text-decoration : underline;
    font-size: 12px;
  }
  & h3{
      margin-top: -10px;
  }
`;

스타일 컴포넌트의 사용 예제를 보시면 & p 이런 식으로 코드를 작성한 것을 보실 수 있습니다!

스타일 컴포넌트를 사용 시 따로따로 하나하나 쓸 필요 없이 scss처럼 자기 자신을 지칭할 때 &를 사용할 수 있습니다.

& (태그)로 편안하게 작업하실 수 있습니다!

---

스타일 컴포넌트는 처음에는 어려웠지만 확실히 미니 프로젝트를 진행하며 써보니

확실하게 왜 스타일 컴포넌트가 편안하고 좋은지 느끼게 되었습니다!

우선 클래스 이름을 정하지 않고 작업하는 것도 확실히 편안했고

정말 직관적이어서 편했습니다!

이번 프로젝트에 대해서는 WIL에 작성하겠지만 정말 많은 걸 배운 것 같습니다!!

리액트로 처음 하는 미니 프로젝트여서 많이 어려운 프로젝트가 아니었지만

수많은 시행착오를 겪었고 그 시행착오만큼 성장한 느낌이 들어 기분이 좋았습니다!

앞으로도 열심히 공부하여 좋은 개발자가 되기 위해 노력할 것입니다!!

모두들 파이팅!!

👍👍👍✍️✍️✍️✍️