스타일 구성 요소

며칠 전, 저는 React로 구축하고 있는 프로젝트를 진행하고 있었습니다.

클래스 이름을 올바르게 참조하고 있는지 확인하고 올바른 위치에서 CSS 파일을 가져오는 것은 이전에 수행한 작업입니다. 이번에는 내 스타일이 적용되지 않았고 내가 할 수 있는 모든 문제 해결을 완료했습니다. 그래서 저는 Google에 접속하여 "styling in React"를 찾아보았습니다. 매우 광범위한 검색어를 알고 있지만 styled-components를 찾는 데 도움이 되었습니다.
styled-components는 무엇입니까?

즉, styled-component를 사용하면 JS 파일에 CSS를 작성할 수 있습니다.

전에는 styled-components를 사용한 적이 없었고 그것에 대해 아주 짧게 들었던 기억만 납니다.

먼저 styled-components 패키지를 설치해야 했습니다. 그렇게 하기 위해 다음을 실행했습니다.
npm i styled-components
그런 다음 Footer.js 파일 작업을 시작했습니다.
Footer 구성 요소는 다음과 같이 나왔습니다.

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const SiteFooter = styled.footer `
  position: fixed;
  background-color: #8FBB99;
  bottom: 0;
  width: 100%;
`

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: "white",
}


function Footer() {
  return (
    <SiteFooter>
      <Link to="/contact" style={linkStyle}>
        Contact
      </Link>
    </SiteFooter>
  )
}

export default Footer;

짜잔! 바닥글이 있습니다 🎉


styled 패키지에서 styled-components를 가져와 선택한 HTML 요소를 렌더링할 React 구성 요소를 만들 수 있습니다.

빨간색 사각형인 div를 만들고 싶다고 가정해 보겠습니다. Styled-components를 사용하면 내가 이름을 지정할 수 있는 구성 요소로 빨간색 사각형을 참조할 수 있습니다...RedSquare .

const RedSquare = styled.div`
    width: 100px;
    height: 100px;
    background-color: red;
`

SiteFooter 에서 CSS가 백틱 내부에 작성되었음을 알 수 있습니다. 이들은 태그가 지정된 템플릿 리터럴입니다. 태그가 있는 템플릿 리터럴을 쉽게 생각하는 방법은 함수와 같습니다.

스타일 구성 요소 사용의 이점

바닥글은 최소한의 스타일이 필요하기 때문에 styled-components를 사용하는 좋은 이유였습니다.

구성 요소 자체의 모든 스타일 지정을 처리했으므로 파일에서 클래스 이름을 검색하고 변경할 필요가 없습니다. 스타일 지정, 마크업 및 논리가 모두 하나의 파일에 있으며 원활한 개발자 경험을 제공합니다.

이것은 React에 대한 심층 분석에서 상당히 잠금 해제되었습니다!

React에서 가장 좋아하는 점은 무엇입니까?