[NPM] Styled-components

 

리액트 인강을 보다보면 많이 나오는 

styled Components! 

 

🎁 styled components 에 대해서 자세히 알아보도록 하자! 🎁

 

 

 

---

 

 

💖 Styled Component란?

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

.

 

🔊 본질적으로, styled-coponents 는 styled-components 라이브러리를 사용하여리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다.

 

 

 

🚨  왜 styled-components를 사용하는가?

Component가 많을 경우, class명이 중복될 수 있는 문제가 발생할 수 있다.
이를 방자하기 위해 class 선언 없이 component에 css를 직접 장착하는 방식을 사용하면 각 components간의 중복이 발생할 필요도 없고, 따라서 class명이 중복되는 일도 막을 수 있다. = CSS in JS

 

 

 

 

🎁 styled Components 주소 🎁

https://styled-components.com/

styled-components

 

 

 

 

---

 

🌟 Styled Component 특징

 

1. Automatic critical CSS

화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다.

따라서 코드를 적절히 분배해 놓으면 사용자가 애플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다.

 

 

2. No class name bugs

스스로 유니크한 className을 생성한다. 이는 className의 중복이나 오타로 인한 버그를 줄여준다.

 

 

3. Easier deletion of CSS

모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다.

 

 

4. Simple dynamic styling

className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다.

 

 

5. Painless maintenance

컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다.

 

 

6. Automatic vendor prefixing

개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 될 뿐이다. 이외의 것들은 Styled Component가 알아서 처리해 준다.

 

 

 

 

 

---

 

👍 Styled Component  장점

- Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다.

- 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.

- 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다.

 

 

👎 Styled Component  단점

- 빠른 페이지 로드에 불리하다.

 

 

 

 

---

 

👏 설치 방법

 

🔊 styled-components 설치 (터미널에 입력)

 

npm install styled-components

 

 

 

  "dependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "styled-components": "^4.3.2"
  },

 

😘 설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있습니다.

 

 

 

 

---

 

 

 

 

🔥 styled-components 내에서 emmet을 쓰고 싶다면 vscode-styled-components 을 설치합니다. 🔥

 

 

 

 

 

---

 

🌎 기본문법

 

import styled from "styled-components";

const StyledDiv = styled.div`
  // <div> HTML 엘리먼트에 대한 스타일 정의
`;

return <StyledDiv />

 

 

😘 HTML 엘리먼트를 스타일링 할 때는 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근합니다.

 

 

 

 

 

---

 

🌟 가변 스타일링

1. 조건부 & 가변 스타일링

 

const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
    //한가지 속성만 조건부 css 처리할때 사용
    background: ${(props) => props.color || "blue"}; // 기본값 적용
    background: ${(props) => props.color}; // 기본값 적용 X
    color: ${({isDone})=>(isDone && "#dddddd")};
`;

return (
  <>
    <Box color="red" /> // 1. 발강색 박스 출력 
    <Box isDone />// 2. 파랑색 박스 출력 , 글자색 #dddddd 출력
  </>
)

 

 

조건(prop) && 참일경우 : 왼쪽 조건이 참이면 오른쪽을 실행
조건(prop) ? 참일경우 : 거짓일경우 : 조건에 따라 참 / 거짓 일때를 실행한다.
조건(prop) || ... :  props가 전달되지 않은 경우 기본설정에 따르고, props를 전달 받으면 지정조건에 따른다

 

 

 

 

 

const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
   
   // 한꺼번에 많은 css를 조건부 처리할때 사용
   // ${({전달받은 props}) => 조건 && css ``}; 
   
    ${({ inverted }) =>
    inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;

      &:hover {
        background: white;
        color: black;
      }
      
    `};
`;

return (
  <>
    <Box inverted={true} /> //조건부 css 적용
    <Box inverted />// //조건부 css 적용
    <Box /> // 조건부 css가 적용되지 않는다.
  </>
)

 

styled-components를 사용하면서 가장 유용하다고 생각한 기능입니다.
JavaScript와 직접적인 연결이 가능하기 때문에
React의 props등을 이용하여 사용자가 원하는 조건부 & 가변 스타일링이 가능하게 됩니다.

 

 

2. 확장 스타일링

 

// 그냥 박스 components
const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
`;

// 확장된 파란박스
const BoxBlue = styled(Box)`
  background: blue;
  color: #fff;
`;

// 확장된 빨간박스
const BoxRed = styled(Box)`
  background: red;
  color: #fff;
`;

return (
  <>
    <Box>그냥 박스입니다</Box>
    <BoxBlue>파란 박스입니다</BoxBlue>
    <BoxRed>빨간 박스입니다.</BoxRed>
  </>
)

 

기존의 사용하던 component 혹은 다른 프레임워크의 스타일 컴포넌트(material ui, react-router-dom)의
component에 CSS를 추가 적용하는 것도 가능합니다.
해당 기능을 이용하여 비슷한 스타일링의 일괄적 관리가 가능하게 됩니다.

 

 

3. 중첩 스코프

 

const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
    
    // p태그 속성만 style css 적용
    p {
      text-size: 15px;
      color: black;
    
    // hover 시 속성적용
    :hover {
      background: rgba(255, 255, 255, 0.9);
    }
    }
    
    // + 연산자는 :: html에 자신뒤에 button이 오면 아래 속성이 들어감
    & + button {
     margin-left: 1rem;
  }
`;

return (
  <Box>
    <p>제목</p>
    <button> 버튼 </button> // button에만 margin-left: 1rem; 적용
  </Box>
)

 

const Weapper = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
    
  ${Emoji} {
    &:hover {
      font-size: 100px;
    }
  }
  ${Emoji}:hover {
    font-size: 150px;
  }
`;

return (
  <Weapper>
  <span>중첩1.<span>
  <Emoji>🧷</Emoji>
  </Weapper>
)

 

styled-components로 구성된 태그에 하위 컴포넌트에게 적용하고 싶은 스타일을 지정하면
해당 스코프를 탐색하여 하위 컴포넌트에게 스타일을 지정합니다.

 

 

4. 테마 기능 (추후 내용 추가 예정 ing...)

 

export const lightTheme = {
  background: "#fff",
};

export const darkTheme = {
  background: "#111"
};

import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme.js";

<ThemeProvider theme={userMode ? darkTheme : lightTheme}>
 ...
</ThemeProvider>

 

ThemeProvider 기능을 이용하여 현재 웹의 스타일 테마를 지정할 수 있습니다.
React의 경우 ThemeProvider의 하위 컴포넌트들은 props로 theme을 받게되며 
props.theme를 통해 사용자가 원하는 웹의 테마를 지정하게 됩니다.

해당 기능을 통해 사용자의 state에 따른 야간모드 등을 구현할 수 있게 됩니다.

 

 

 

 

 

---

🙌  추가 스타일링

 

1. 전역 스타일링 createGlobalStyle

 

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

import React from 'react';

const GlobalStyle = createGlobalStyle`
  body{
    padding: 0;
    margin: 0;
  }
`;

function App() {
    return (
        <Container>
            <GlobalStyle />
            <Button success>Hello</Button>
            <Button danger>Hello</Button>
        </Container>
    );
}

export default App

 

 

Styled-Components은 margin: 0, padding: 0, font-family 같이 Global한 속성들을 적용시킬 수 있게 해주는 방법이 있다.

 

우선 createGlobalStyle 을 import 한 후,  GlobalStyle 을 생성해준다.

코드 안쪽에는 적용시킬 스타일 css를 입력 그리곤 최상위 컴포넌트에 적어주면 적용이 된다.

 

 

2.  반응형 

 

const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
	
    // 중첩 사용가능
    @media (max-width: 1024px) {
      width: 768px;
    }
    @media (max-width: 768px) {
      width: 100%;
    }
`;

return (
  <>
    <Box /> 
  </>
)

 

 

3. css의 의사 요소, 의사 선택자 및 네스팅

 

const Box = styled.div`
  color: blue;

  &:hover {
    // 해당 컴포넌트 hover 시 color: red; 
    color: red; 
  }

  & ~ & {
    background: tomato;
  }

  & + & {
    background: lime;
  }

  &.something {
  // className 이 ".something" 으로 지정된 경우 background: orange;
    background: orange;
  }

  .something-else & {
    // "something-else"라는 className을 가진 부모 컴포넌트의 자식이 <Box> 인 경우  border: 1px solid; 
    border: 1px solid; 
  }
`

render(
    <Box>내용1</Box>
    <Box>내용2 </Box>
    <Box className="something">내용3</Box>
    <div>내용4</div>
    <Box>내용5</Box>
    <div className="something-else">
      <Box>내용7</Box>
    </div>
)

 

 

4.  특정 컴포넌트 동적 사용 as

 

const Box = styled.div`
    display:flex;
    width: 200px;
    height: 200px;
`;

return (
  // as 속성변경 div 👉 header 로 변경된걸 알 수 있음.
  <Box as='header'>  
    <Box />
   	// as 속성변경 div 👉 a 로 변경된걸 알 수 있음. 
    <Box  as='a' href='/'/>
  </Box>
)

 

 

5. Input Attributes

// input.attrs에 required  minLength: "10" 공통으로 넣기
const Input = styled.input.attrs({ required: true, minLength: 10 })`
  background-color: #ddd;
  border: 0;
  margin-right: 10px;
`;

return (
  <>
    <Input />
    <Input />
  </>
)

 

attrs 라는 속성을 사용해서 고정되는 Props나 다이나믹한 Props, 기본 Tag의 props 등을 전달할 수 있습니다.

 

모든 <Input /> component에 required, minLength: 10 가 삽입됩니다.

 

 

6. 애니메이션

 

const rotateAnimation = keyframes`
  0% {
    transform : rotate(0deg);
    border-radius : 0px;
  } 50% {
    border-radius : 50%;
  } 100% {
    transform : rotate(360deg);
    border-radius : 0px;
  }
`;

const Box = styled.div`
    width: 200px;
    height: 200px;
      
   animation: ${rotateAnimation} 5s linear infinite;
`;

return <Box />