Styled Component-React 에서 스타일링하기 2

이번 포스팅에서 다룰 내용

• styled-components가 무엇인지
• 기본적인 사용법과 실습 예시
• 컴포넌트 스타일 재사용 방법
• 자동완성 VSCode 확장 소개
• styled-components의 고급 사용법
• props를 이용한 동적 스타일링

 

 

1. 웹프론트엔드의 기본 구성

   1) HTML

   2) JavaScript

   3) CSS

  앞에서 SCSS라는 기술을 알아 보았는데 Mixin 과 변수 및 중첩을 사용하여 문법을 좀더

  단축 시킬 수는 있었지만 아직도 CSS 파일은 따로 작성해야 한다.

  만약 CSS 까지도 JavaScript 파일 안에서 작성 할 수 있다면 진정한 컴포넌트 단위 개발(*CCD)이 가능

  → 이렇게 해서 탄생한 기술이 Styled Componet 다

 

*CCD : Component Driven Development

 

 2. Styled-Components의 장점

• CSS, JS, HTML을 하나의 컴포넌트로 묶어서 작성 가능
• 클래스명 작명이 필요 없다 ! (클래스 이름을 Styled Component 가 자동 생성)
• CSS 파일 없이도 스타일링 가능
• 기존 컴포넌트를 재사용해서 확장 가능
• VSCode 확장 프로그램을 통해 자동완성까지 지원!

 

3. 설치 및 기본 사용법

 

< 설 치 >

npm install styled-components

 

 

< 기본사용법 >

SCSS 의 문법을 사용해서 중첩을 적용은 가능 하나 변수나 Mixin 사용은 하지 못한다.

1. styled component 을 import 해서 가져온다

2. 컴포넌트 함수 바깥에서 styled component 를 생성하여 스타일을 작성

const [변수명] = styled.[만들고싶은 태그명] '  [백틱 안쪽에 스타일을 작성]   '

3.  생성 형식은 이렇게 하고 컴포넌트 return 문에 [변수명] 을 태그로 작성한다.

 

<예시>

import styled from 'styled-components';

const BlueButton = styled.button` 
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 4px;
`;

function App() {
  return <BlueButton>파란색 버튼</BlueButton>;
}

이렇게 작성하면 css 파일 없이 JavaScript 파일 안에서 스타일링을 할 수 있다.

또한 이렇게 만들어놓으면 재 사용이 가능하다.

 

 

 

4. Styled Componet 재사용 하기

기존에 만든 컴포넌트의 속성을 물려받아서 새 컴포넌트를 만들 수 있다.

const BigBlueButton = styled(BlueButton)`
  width: 300px;
  padding: 20px;
`;

이제 <BigBlueButton>을 사용하면 기존 스타일을 물려받고, 새로운 스타일을 추가한 컴포넌트 완성! 

 

 

5. 또 재사용? 가능!

컴포넌트를 연속적으로 재사용할 수도 있다

const TextBigBlueButton = styled(BigBlueButton)`
  font-size: 30px;
  font-weight: bold;
`;

이때 TextBigBlueButton은
BlueButton → BigBlueButton → TextBigBlueButton
이렇게 스타일을 물려받게 된다.

 

 

6. 생성된 클래스 명 확인

  

  브라우저 개발도구에서 확인해보면 Styled Component 가 자동으로 생성한 독특한 클래스명이 적용 되어 있다. 

 

 

7. Props 사용하기

 속성에다가 컴포넌트에서 작성한 props 를 아래와 같이 작성하면 적용이 된다.

속성명 : ${(prop) =>prop.프롭스이름 }

 

 

<적용예시>

const PropsButton = styled.button `
background-color : ${(props) => props.backgroundColor}
`

function App(){
return(
	<PropsButton backgroundColor = "green" >props 버튼 </PropsButton>
)

}

 

 

 

이것을 활용하면 Props의 값에 따라 색을 변경하는 버튼도 만들 수 있다.

 

const Container = styled.div`
background-color : rgb (${(props) => props.input)}, 
                        ${(props) => props.input)}, 
                        ${(props) => props.input)}, )
`



function App(){

 const [input, setInput] = useState(0)

}

return(

      <Container input ={input}>
        <input
          type ="range"
          value ={input}
          onChange{(e)=> setInput(e.targetvalue)
          min={0}
          max={255}
         />
      </Container>
)

 

 

8. 전역 스타일 적용하기

전역속성 적용 불러오기

import { createGlobalStyle } from "style-components"

 

 

 

사용방법은 변수에 담아서 최상위 컴포넌트에 넣어 주면 된다.

 

const GlovalStyle = createGlobalStyle `
  *{
    margin : 0;
    padding : 0;
  }
    input {
    width : 90%;
  }
`

 

 

최상위에서 셀프클로징 태그로 작성

<GlobalStyle/> 
  <div>
   <input/>
    .
    .
    .
    .
    .
    .

 

 

 

8. Styled-Component 에서 Mixin 구현 적용하기

< css 를 불러온다>

import { css } from "styled-components";

 

 

<Styled Component 에서 Mixin 변수 적용>

export const flexMixin = (
  direction = "row",
  align = "stretch",
  justify = "start",
  gap = 0,
  wrap = "nowrap"
) => {
  return css`
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
    gap: ${gap};
    flex-wrap: ${wrap};
  `;
};

 

 

단일 변수 구현

export const borderRadius = '20px';

 

 

가져와서 쓰기  

const StyledHeader = styled.header`
  ${flexMixin( 'column',undefined ,'center' })};
  border-radius: ${borderRadius};
`;

 

 export 할때 쓴 값을 순서대로 불러오며 중간에 기본값을 적용 하고 싶으면 undefined 라고 작성하면 된다.

 

 

💡 보너스 기능: 다크모드 전환

  전역 스타일에서 Props 로 처리

const [darkMode, setDarkMode] = useState(false);

const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${({ darkMode }) => darkMode ? 'black' : 'white'};
    color: ${({ darkMode }) => darkMode ? 'white' : 'black'};
  }

  svg {
    fill: ${({ darkMode }) => darkMode ? 'white' : 'black'};
  }
`;