React - Styled Component

Wynter24·2023년 8월 30일

💅Styled component

react에서 Css-in-JS 방식으로 컴포넌트를 꾸밀 수 도와주는 패키지
(JS code → CSS 코드로 컴포넌트를 꾸미는 방식)

사용하는 이유🤔

Component가 많을 경우, class명이 중복될 수 있는 문제가 발생할 수 있다.
이를 막기 위해 class 선언 없이 component에 css를 직접 장착하는 방식을 사용하면 각 components간의 중복이 발생하지 않는다.
따라서 class명이 중복되는 일도 막을 수 있다.

사용법🪄

설치

확장에서 vscode styled component설치 후
터미널에서 yarn add styled-components 입력
그럼 마켓에서 패키지를 가져온다

사용하기

import styled from 'styled-components';
기본형식
const 변수 = styled.`css코드 작성`
Tag로써 사용가능한 컴포넌트 됨

	const StBox = styled.div`
 	 width: 100px;
  	 height: 100px;
  	 border: 1px solid red;
  	 margin: 20px;
	`

html에 사용하기

<StBox>
   박스
</StBox>

장점💛

조건적으로 스타일링이 가능함 → 조건부 스타일링

<StBox borderColor="red">박스</StBox>

↘borderColor : props (StBox tag 안에 들어가는 속성)

반복되는 tag의 스타일을 편하게 다르게 할당할 수 있음

정리

Css-in-JS: 자바스크립트로 css 코드를 작성하는 방식
props를 통해서 부모 컴포넌트 → 자식 컴포넌트: 조건부 스타일링 가능
Styled components는 해당 컴포넌트 내에서만 전역 스타일링

↘전역 스타일링: 프로젝트 전체를 아우르는 스타일(globally)
규모가 큰 프로젝트에서는 공통되는 스타일을 따로 빼줘야 한다.