리액트-styled-components: 스타일 입힌 컴포넌트 만들기

Wonju·2022년 1월 26일
0

우선 styled-components를 설치하기 위해선 터미널을 열고
yarn add styled-components
혹은
npm install styled-components 입력 후
사용하고 싶은 컴포넌트 최상단에 import 해준다.
import styled from 'styled-components'


컴포넌트가 많아지게 되면 CSS를 만들 때

  • class가 중복되거나
  • 의도치않게 다른 컴포넌트에 이상한 스타일이 적용되거나
  • CSS파일이 너무 길어지거나
    등등과 같은 어려움이 발생할 수 있다.

그래서 컴포넌트를 만들 때 스타일을 바로 입혀서 만드는 방법이 있는데
그것이 styled-components 라는 라이브러리다.


사용법

padding이 30px인 div박스를 만들고 싶을땐?

import React from "react";
import styled from "styled-components";

let box = styled.div`
	padding: 30px;
`;

function App(){
 return(
   <div>
   	<box></box>
   <div>
   )
}
  1. styled.태그 형식으로 작성한다.
  2. 그리고 중괄호가 아닌 백틱(`)으로 감싸주고 그 안에 스타일을 넣는다.
  3. 그리고 변수에 저장해주면 컴포넌트가 완성된다.

    class 선언할 필요 없이+css파일을 건드릴 필요 없이 바로 <컴포넌트> 완성!


props문법 함께 활용하기✨

비슷한 UI들을 여러가지 만들어야한다면?
일일이 box1, box2, box3... 이런 식으로 만드는건 좀 아닌듯
만약 h2태그가 색깔별로 필요하다면?

이럴때 유용한 props문법

import React from 'react';
import styled from 'styled-components';

let 제목 = styled.h2 `
font-size : 25px;
color: ${props => props.색깔};
`;

function App(){
 return(
   <div>
   	<제목>안녕</제목>
   </div>
   )
}

색상을 기입하는 부분에
${props => props.색깔} 이라는 코드를 작성한다.
그냥 템플릿 리터럴로 작성한 것이고, 'props.색깔' 이라는 props변수를 집어넣은 것이다. 또한 위와 같이 ${props.색깔} 이렇게 하면 안되고 콜백함수로 집어넣어주어야 한다.
그리고나면

import React from 'react';
import styled from 'styled-components';

let 제목 = styled.h2 `
font-size : 25px;
color: ${props => props.색깔};
`;

function App(){
 return(
   <div>
   	<제목 색깔="blue">안녕1</제목>
        <제목 색깔="red">안녕2</제목>
   </div>
   )
}

props로 뚫어놓은 자리에 원하는 문자를 전송시켜줄 수 있다.
그러면

안녕1

안녕1

처럼 각각 스타일이 적용되어 나타난다.

  • 리액트에서 props전송하는 방법 2가지
  1. <제목 색상="blue"></제목>
  2. <제목 색상={'red'}></제목>

그냥 일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 쓰면 되고
변수나 자료형을 담고 싶으면 {} 중괄호 안에 쓰면 된다.


styled-components가 무조건 기존CSS작성보다 좋은 것은 아니지만

  1. 다른 파일과 컴포넌트명이 겹쳐도 CSS상 아무 문제가 없음
  2. 컴포넌트의 스타일 수정할 때 CSS파일이 아니라 컴포넌트파일에서 찾으면 됨

과 같은 장점들이 존재하는 방법이다.

profile
안녕하세여

0개의 댓글