[React] styled-components란? / 사용법 (js/ts)

👉 styled-components란?

스타일이 지정된 html 요소(element)들을 React 컴포넌트 형식으로 사용할 수 있게 해주는 Node.js 패키지

 

React란?

[Node.js] React.js 란? / React 사용법 ( create-react-app )

 

styled-components 장점

html 태그를 손쉽게 변경할 수 있다. ( styled-components로 지정된 부분만 변경하면됨 )

 

styled-components 설치

// javascript

npm i styled-components

// typescript

npm i @types/styled-components

 

vscode 설정 ( 확장 프로그램 설치 ) / 

 

👉 styled-components 사용 (js)

import styled from 'styled-components'

// 스타일이 지정된 component만들기

// html요소의 스타일을 저장해, component형식으로 사용한다! 

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  /* 변수 받아와서, 여러가지 기능 사용가능 */
  color: ${(props) => props.color};
  ${(props) => 
    props.color
      ? css`
        font-size: 49px;
      `
      : css`
        text-decoration: underline;
      `
  }
`;

// 컴포넌트 이므로, props를 받아올 수 있다!

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title color="red">
      Hello World!
    </Title>
  </Wrapper>
);

 

styled-components 사용 (ts)

import styled from 'styled-components'

// 사용할 변수의 타입 지정해주기 ( 인터페이스를 지정해주어도 됨 )
type Colors = {
  color: string;
};

// 인터페이스 사용해서 지정하는 법 ( 둘중에 하나만 선택 )
interface Colors {
  color: string;
};

// 스타일이 지정된 component만들기

// 컴포넌트 내부에 사용된 변수의 타입이 사용되었음을 알려주기

const Title = styled.h1<Colors>`
  font-size: 1.5em;
  text-align: center;
  color: ${props => props.color};
  ${(props) => 
    props.color
      ? `
        font-size: 49px;
      `
      : `
        text-decoration: underline;
      `
  }
`;

// 컴포넌트 이므로, props를 받아올 수 있다!

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title color="red">
      Hello World!
    </Title>
  </Wrapper>
);

 

styled-components 로 테마설정하기

 

1. javascript

 

// App.js - react_project

// 테마 설정하기 위한 ThemeProvider 불러오기
import { ThemeProvider } from "styled-components";

// 다크모드 테마 설정하기
const lightTheme = {
  fontColor: "#2c2c2c",
  bgColor: "lightgray",
}

// 일반모드 테마 설정하기
const darkTheme = {
  fontColor: "lightgray",
  bgColor: "#2c2c2c",
}

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar);
  const darkMode = useReactiveVar(darkModeVar);
  // ThemeProvider로 전체 컴포넌트 감싸기, theme요소에 우리가 만든 테마 적용해주기
  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      ...
    </ThemeProvider>
  );
}

export default App;

 

2. typescript

 

 타입 선언 파일 만들어주기

// styled.d.ts - 아무이름이나 상관없음 (.d.ts 확장자만 유지 )

// styled-components 불러오기
import 'styled-components';

// styled-components안에 들어있는 DefaultTheme 형식 지정해주기
declare module 'styled-components' {
  export interface DefaultTheme {
    // 사용할 요소 형식 지정
    fontColor: string;
    bgColor: string;
  }
}

 

선언한 형식에 맞춰 테마 만들기

// App.js - react_project

// 테마 형식 불러올 DefaultTheme,테마 설정하기 위한 ThemeProvider 불러오기
import { DefaultTheme, ThemeProvider } from "styled-components";

// 다크모드 테마를 DefaultTheme 형식에 맞게 작성하기
const lightTheme : DefaultTheme = {
  fontColor: "#2c2c2c",
  bgColor: "lightgray",
}

// 일반모드 테마를 DefaultTheme 형식에 맞게 작성하기
const darkTheme : DefaultTheme = {
  fontColor: "lightgray",
  bgColor: "#2c2c2c",
}

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar);
  const darkMode = useReactiveVar(darkModeVar);
  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      ...
    </ThemeProvider>
  );
}

export default App;

 

---

컴포넌트 확장 기능으로 이미 만들어진 컴포넌트 재사용하기

 

확장(extend)기능 사용전

const TopBox = styled.div`
  background-color: white;
  border-color: rgb(219, 219, 219);
  padding: 30px 40px 23px 40px;
  margin-top: 95px;
  margin-bottom: 10px;
`;

const NomalBox = styled.div`
  background-color: white;
  border-color: rgb(219, 219, 219);
  padding: 23px 90px 23px 90px;
`;

 

확장 기능 사용후 ( 중복 제거 )

const WhiteBox = styled.div`
  background-color: white;
  border-color: rgb(219, 219, 219);
`;

// styled()로 기존의 스타일 컴포넌트 확장해서 사용하기
const TopBox = styled(WhiteBox)`
  padding: 30px 40px 23px 40px;
  margin-top: 95px;
  margin-bottom: 10px;
`;

const NomalBox = styled(WhiteBox)`
  padding: 23px 90px 23px 90px;
`;