React 숙련 1 (styled-components)

CSS-in-JS란? 📖

`CSS-in-JS`  방식이란 단어 그대로 자바스크립트 코드로 css 코드를 작성해 컴포넌트를 꾸미는 방식입니다.

 

❓왜 사용하고 장점은 뭘까요

컴포넌트를 꾸미기 위해 css 파일을 만들어 import 하고 `HTML tag`마다 `className`를 넣고 css 코드를 작성하는 것을 반복하는데 조금 불편합니다. 그래서 css-in-js를 사용하면 style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있습니다.

 

Styled-components 📖

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

 

사용 방법

vscode 터미널에서 아래 명령어를 입력해 패키지를 설치합니다.

yarn add styled-components

 

사용하기

import React from "react";
import styled from "styled-components"; // import 하기

const StBox = styled.div` // StBox 컴포넌트 만들기
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
  margin: 20px;
`;

const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox> // HTML 태그 처럼 사용
      <StBox borderColor="green">초록 박스</StBox> // props를 통해 borderColor 전달
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

 

1. 설치한 `styled-components`를 import를 해줍니다

2. `styled` 키워드를 사용해 컴포넌트를 만들어줍니다.

3. jsx에서 `HTML 태그`를 사용하듯이 사용합니다.

4. 태그에 `props`를 전달하고 받아서 사용할 수 있습니다.

결과 화면

 

 

`props`는 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 사용하는데 styled-components도 컴포넌트입니다. 그래서 `props`를 통해 border color에 대한 정보를 전달해 줄 수 있습니다.

 

 

전역 스타일링 📖

프로젝트에 공통으로 들어갈 스타일을 적용하는 것이 `전역 스타일링`입니다.

 

GlobalStyles 적용

공통으로 들어갈 스타일을 `GlobalStyle.jsx` 파일을 만들어 export 해줍니다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

 

 

이후 `App.jsx`파일에서 import 해주고 `<GlobalStyle/>` 태그를 사용하면 전역 스타일링을 적용할 수 있습니다.

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;