React Styled Components

H_Chang·2023년 11월 7일
1

Styled Component란?

  • styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

CSS-in-Js란?

  • 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.
  • CSS-in-JS 방식을 사용하기위해 2가지 절차가 필요하다
  1. VScode 플러그인 설치
  • styled-components를 이용해서 코드를 작성할때 편리한 밑의 이미지와 같은 플러그인을 설치하자
  1. yarn으로 styled-components 설치하기
  • VScode 터미널에 다음과같이 입력하고 패키지를 추가하자
yarn add styled-components

Styled Component 기본문법

  1. 컴포넌트 이름은 대문자로 시작한다.
  2. styled 뒤에 사용해야 할 HTML 태그명 입력한다.
  3. 백틱(``)으로 감싸서 스타일시트 작성한다.
  • styled-comComponent는 내부적으로 props를 받을 수 있고, 그에 따라 props에 스타일을 전달할 수 있다.
    <문법 예시>
import styled from 'styled-componets'

render(
  <Layout>
    <Title>
      Hello World!
    </Title>
  </Layout>
);

const Title = styled.h1`
  font-size: 10px;
  text-align: center;
  color: red;
`;

const Wrapper = styled.section`
  padding: 5px;
  background: green;
`;
profile
프론트 엔드 시작하는 뉴비!

0개의 댓글