styled component란?

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

왜 styled component인가?

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

inline-style을 사용하지 않을 수 있다.
일반적으로 inline-style은 권장되지 않는데 그 이유는 미디어쿼리를 사용 할 수 없고
브라우저 호환성, camel-casing 등등의 이유로 권장되지 않는다.

styled component를 react - native의 묶을 수 있는 점

Styled-components 는 서버 사이드 렌더링을 지원한다.

위와 같은 이유들로 우리는 styled component를 선택하게 되는데 styled component는 어떻게 쓸까?

styled component 작성하기

패키지 설치

$ npm i styled-components

설치 후에 package.json에 styled-components가 추가된 것을 확인

"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0",
"styled-components": "5.3.5"
},

skeletonCompo.tsx라는 파일에 만약 style을 적용 할 것이라면
skeletonCompo.style.tsx라는 이름으로 파일을 만들어준다.

적용하기

skeletonCompo.style.tsx 파일안에 들어와
import styled from "styled-components"를 해준다.

export const Wrapper = styled.div`` 

위와같이 변수를 선언해주면 이 자체가 div요소가 되는것이다.

우리는 이 순간부터 지금 Wrapper라는 div element를 만든 것이고 ,

export const Wrapper = styled.div`

.scroll_ui {
      overflow: hidden;
      height: 100%;
      -ms-overflow-style: none;
    }` 

위와같이 div wrapper안에 원하는 css요소를 추가해주면된다.

styled component 적용하기

위 예시에서 skeletonCompo.style.tsx로 가서 어떻게 사용하면 될까?

import * as S from "./SkeletonCompo.style" 를 해준다.

<script>
import * as S from "./SkeletonCompo.style"

const SkeletonCompo: FC<Props> = ({ boardItems, value, boardItemLenthChecker }) => {
  return (
    <S.Wrapper>
      <ul>
        {boardItemLenthChecker === true ? (
          new Array(10).fill(1).map((_, i) => {
            return (
              <li key={i}>
                <span className="skeleton_title_area"></span>
                <span className="skeleton_contents"></span>
              </li>
            )
          })
        ) : (
          <SearchList boardItems={boardItems} value={value}></SearchList>
        )}
      </ul>
    </S.Wrapper>
  )
}

export default SkeletonCompo

</script>

위 코드에서 import구문과 S.Wrapper를 잘 보길 바란다.

SkeletonCompo.style.tsx의 파일내부에 우리가 const Wrapper로 div를 만든것을 기억할 것이다.

그리고 우리는 as S를 통해 이 파일을 S라고 부를것이다.

그래서 S.Wrapper를 가져와 ul의 외부로 감싸준것이다.

그렇게되면 S.wrapper라는 div가 ul을 감싼 형태가 되며 이 안에서 클레스네임을 지정하면 SkeletonCompo.style.tsx을 통해 스타일링이 가능해지는 것이다.

S.wrapper 컴포넌트 그 자체이기 떄문에 props를 통한 값도 전달이 가능하다.