240816 Styled-components

신한별·2024년 8월 16일

React 정리

💪 매일 기록

목록 보기

53/97

01. CSS-JS?

(1) CSS-in-JS방식

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식.
CSS-in-JS 방식을 사용하기 위해서는 새로운 패키지 사용
장점
style 적용 시 조건문,변수등 다양한 로직 사용 가능

(2) styled-components

📢 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지

패키지 ?
React에는 없는 기능이지만 추가로 가져와서 사용할 수 있는 써드파티 프로그램
누군가에 의해 만들어진 것으로 npm에 모여있음
사용하고자 하는 패키지를 npm install 또는 yarn add를 통해 설치하고 사용

02. styled-components

📢 styled-components를 직접 설치하고 사용해보자

설치

VSCode 플러그인 설치

플러그인 설치해야만 styled-components 안에서 스타일 코드를 편하게 작성할 수 있다.
yarn으로 styled-components 설치하기

yarn add styled-components

사용

기본적인 사용법
꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식

// src/App.js

import React from "react";
// styled-components에서 styled 라는 키워드를 import
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듦. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용
  return <StBox>박스</StBox>;
};

export default App;