CSS-in-js VS Styled Components

❓css-in-js와 styled-components이 상당히 유사해 보여서 혼동!! 자세한 차이를 알고 싶음❓

CSS modules

CSS Modules에서는 스타일을 정의한 CSS 파일의 클래스 이름들이 객체로 변환되어 자동으로 생성된 모듈에 들어가게 된다. 컴포넌트에서는 이러한 클래스 이름을 사용하여 스타일을 적용한다.

/* styles.module.css */

.container {
  padding: 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.text {
  color: blue;
  font-size: 16px;
}

➕ 이 CSS들이 styles객체로써 js파일에 import되어지고 사용할 때도 객체에서 값을 찾아오는 방식으로 사용해야 함!

// MyComponent.js

import React from 'react';
// ⭐
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <p className={styles.text}>Hello, CSS Modules!</p>
    </div>
  );
};

export default MyComponent;

 

✔️ modules방식은 CSS파일을 따로 분리해서 작성하고 사용하기 위해 import해올때 작성된 스타일을 객체로 받아와서 사용함

---

CSS-in-js

스타일을 JavaScript 파일 안에 작성하는 개념입니다. 이것은 스타일을 동적으로 생성하고 적용하는 데 도움이 된다.

 

컴포넌트 단위로 스타일링이 가능하며, 스타일과 컴포넌트가 결합되어 컴포넌트 기반의 아키텍처를 구축하는 데 도움이 된다.

import React from 'react';

const MyComponent = () => {
  const styles = {
    container: {
      padding: '16px',
      backgroundColor: '#f0f0f0',
      border: '1px solid #ccc',
    },
    text: {
      color: 'blue',
      fontSize: '16px',
    },
  };

  return (
    <div style={styles.container}>
      <p style={styles.text}>Hello, CSS-in-JS!</p>
    </div>
  );
};

export default MyComponent;

 

✔️ css-in-js는 말그대로 인듯함 css를 js파일안에 같이 작성하는 것으로 적용할 css를 하나의 변수에 객체로 작성하고 그것을 jsx로 사용시 컴포넌트로 가져와서 작성한 css객체에서 원하는 값을 가져오는 형식인 것 같음!

---

styled-components

JavaScript 파일 안에서 컴포넌트에 스타일을 직접 적용하는 라이브러리/패키지이다. 특별한 문법을 사용하여 CSS를 작성할 수 있다. (리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지)

 

자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용한다.

 

자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있다.

 

별도의 CSS파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리하다.

 

스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을 때 유리하다.

---

import

import styled from 'styled-components';

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

const Container = styled.div`
  padding: 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
`;

const Text = styled.p`
  color: blue;
  font-size: 16px;
`;

const MyComponent = () => {
  return (
    <Container>
      <Text>Hello, Styled Components!</Text>
    </Container>
  );
};

export default MyComponent;

 

✔️ styled-components는 react에서 css를 효율적으로 사용할 수 있게 하는 패키지로 css를 js파일에 같이 작성한다는 점에서 css-in-js와 비슷하지만 css를 하나의 변수에 객체로 지정해서 불러오는 css-in-js와는 달리 단독적으로 각각의 css를 작성해서 그 자체를 그대로 사용함!!

---

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

 

태그로서 작성된 태그, 태그로써 사용이 될 수 있는 컴포넌트가 됨

스타일 된 컴포넌트다 -> styled component

// 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;

> 만들어진 스타일 컴포넌트를 태그처럼 사용하는 것으로 이해하기

 

const StBox = styled.div``;

백틱 안에css요소를 넣어주기(css문법으로)

styled. 뒤에는 html의 태그가 옵니다. 원하는 html 태그를 사용해서 styled-components를 만들 수 있습니다.

div ➡️ styled.div
span ➡️ styled.span
button ➡️ styled.button

---

조건부 스타일링

classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있다.

import './App.css';
import styled from 'styled-components';


const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

function App() {
  return <StBox borderColor="blue">박스</StBox>;
}

export default App;

> props를 이용해서 App->StBox로 boderColor="red"라는 데이터를 내려주게 됨

---

import './App.css';
import styled from 'styled-components';


const StBox = styled.div`
  width: 100px;
  height: 100px;
  // 화살표 함수
  border: 1px solid ${(props) => props.borderColor};
  
  // 함수
  // border: 1px solid ${function(props){
  // return props.borderColor}};
  
  margin: 20px;
`;

function App() {
  return (
    <>
      <StBox borderColor="red">레드박스</StBox>
      <StBox borderColor="blue">블루박스</StBox>
      <StBox borderColor="green">그린박스</StBox>
    </>
  )
}

export default App;

이렇게 각각보내 줌으로써 이렇게 다른 색으로 CSS를 지정해주지 않아도 된다.

---

➕styled-components 라이브러리에서 제공되는 css 함수를 가져오는 구문

import { css } from 'styled-components';

import styled, { css } from 'styled-components';

const sharedStyles = css`
  padding: 16px;
  border: 1px solid #ccc;
`;

const Container = styled.div`
  ${sharedStyles}
  background-color: #f0f0f0;
`;

const Text = styled.p`
  ${sharedStyles}
  color: blue;
  font-size: 16px;
`;

const MyComponent = () => {
  return (
    <Container>
      <Text>Hello, styled-components with css function!</Text>
    </Container>
  );
};

export default MyComponent;

 

✔️sharedStyles라는 변수에 일반 CSS 코드가 담긴 css 함수를 사용하여 스타일을 정의한다. 그리고 이 변수를 Container 및 Text 스타일 정의에서 재사용한다. 이렇게 함으로써 코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있다.