React용 스타일 구성 요소 치트 시트

React.js 앱 개발에서 Styled 구성 요소의 사용은 지난 몇 년 동안 조용히 인기를 얻었습니다. 그 인기는 주로 앱의 스타일을 작성할 때 더 나은 개발자 경험을 제공한다는 사실 때문입니다. 전통적으로 모든 스타일이 한 곳에 집중된 하나의 긴 CSS 스타일 시트가 있었습니다. 일반적으로 직면하는 문제는 특정성 문제로 인한 CSS 이름 충돌 및 스타일 문제입니다. 스타일이 지정된 구성 요소뿐만 아니라 많은 다른 솔루션, 특히 BEM, sass, CSS 모듈이 이러한 문제를 해결하며 모두 장단점이 있습니다. 이 기사에서는 어떤 것을 사용하는 것이 가장 좋은지 논의하지 않고 스타일이 지정된 구성 요소에 대한 치트 시트를 제공합니다. 이와 관련하여 제가 만든 영상도 있습니다.


앞으로 스타일이 지정된 구성 요소를 사용하고 싶게 만드는 4가지 사항은 다음과 같습니다.

1] 범위 수준 스타일, 즉 구성 요소와 스타일이 함께 그룹화되므로 UI를 손상시키는 스타일을 찾는 데 많은 검색을 할 필요가 없습니다.
2] 변수를 사용하고 구성 요소에 소품을 삽입하는 기능. 예, 동적이며 프로그래밍 논리를 사용할 수 있습니다!
3] 고유한 클래스 이름을 생각하느라 시간을 낭비할 필요가 없습니다.
4} 배우기 쉽습니다.

스타일이 지정된 첫 번째 구성 요소를 코딩하는 방법을 살펴보겠습니다.

위의 세 단계에서 알 수 있듯이 조용합니다. 백 틱을 사용하여 스타일이 지정된 구성 요소 함수를 호출하기 때문에 선언이 약간 이상할 수 있습니다.
const Button = styled.button`color:red;`
그러나 이것은 일반적인 함수 호출을 수행하고 배열을 전달하는 것과 실제로 동일합니다.
const Button = styled.button([`color:red;`])
대괄호 없이 함수를 호출하고 백틱 사이에 인수를 넣는 것을 태그가 지정된 템플릿 리터럴이라고 하며, 이것이 자바스크립트 기능입니다. 태그가 지정된 템플릿 리터럴이 해석되면 항상 배열 유형의 인수가 하나 있습니다.

몇 가지 예를 보려면 read more about tagged template literals, go to Wes Bos article

Wes Bos의 기사에서 태그가 지정된 템플릿 리터럴에 변수를 삽입할 수 있음을 배웠습니다. 따라서 스타일이 지정된 구성 요소에서 다음을 수행할 수 있습니다.

let primary_color='red';
const Button = styled.button`color:${primary_color};` 

이것이 스타일이 지정된 구성 요소에 강력한 기능을 제공하고 모든 종류의 트릭을 수행할 수 있습니다.

스타일 구성 요소를 처음 사용하는 초보자를 위한 치트 시트입니다.

다음은 스타일이 지정된 구성 요소를 시작하고 최대한 활용하는 데 도움이 되는 몇 가지 코드 조각입니다. 이 치트 시트의 코드 예제에서는 npx create-react-app을 사용하여 기본 앱을 만들었다고 가정합니다.

1] 설치

npm install styled-components
yarn add styled-components

2] 스크립트로 가져오기

// then, just import it into your script like:
import styled from "styled-components"

3] h1,h2,div,input,span 등 요소의 기본 스타일링

//Declare wrapper for a h2 element with styling like this
const Headline = styled.h2`
  color: black;
  border-bottom:1px solid black;
`
function App() {
  //Use Headline wrapper component in your app 
  return (
    <Headline>
      The Headline goes here
    </Headline>
  )
}

모든 html 요소에 대한 메서드가 있으므로 <diV>를 사용하여 styled.div 스타일을 지정하거나 <input>를 사용하여 스타일styled.input을 지정할 수 있습니다.

4] :hover, :focus, :active 등과 같은 유사 클래스를 포함하려면 '&'를 접두사로 붙여야 합니다. &:hover {.....}처럼

    const Button = styled.button`
        width:100px;
        color:white;
        background-color: green;

        //Add hover styling
        &:hover {
            background-color:gray;
        }

    };`

5] 스타일이 지정된 구성 요소에 미디어 쿼리를 포함합니다.

    const Wrapper = styled.div`
    width:50vw;

    //Make it full width on smaller screens 
    @media screen and (max-width: 800px) {
        background-color: lightgray;
        width:100vw;

    }
    `

6] 스타일이 지정된 구성 요소의 스타일 확장 - 기본 스타일을 사용한 다음 새 스타일 규칙으로 확장할 수 있습니다.

// Base style for heading 
const Headline = styled.h1`
  border-bottom:2px solid gray;
  color: blue;
`;

//Extend base style to overide color
const HeadlineGreen = styled(Headline)`
  color: green;
`;

function App() {
  return (
    <>

      <Headline>
        Standard Blue headline
      </Headline>
      <HeadlineGreen>
        Extended green headline 
      </HeadlineGreen>
    </>
  );
}

HeadlineGreen 선언을 주의 깊게 살펴보면 Headline을 인수로 전달하고 있음을 알 수 있습니다.

const HeadlineGreen = styled(Headline)`.....`

7] 일반 CSS 스타일 지정과 같은 선택자에 대한 클래스 및 쓰기 스타일을 계속 사용할 수 있습니다.

//Style everything inside the wrapper with css selectors
const Wrapper = styled.div`
  width:100%;

  .big-heading {
      border-bottom:2px solid blue;
      color: blue;
  }
  button.primary {
    width:100px;
    height:50px;
    background-color:green;
    color:white;
  }
`

function App() {
  return (
    <Wrapper>      
      <h2 className='big-heading'>
        Standard Blue headline
      </h2>
      <button className='primary'>
        A plain Button
      </button>
    </Wrapper>
  );
}
export default App;

8] 스타일이 지정된 구성 요소에 소품을 전달할 수 있습니다.

const Headline = styled.h1`
  color: ${props => props.color};
`
function App() {
  return (
    <>
      {/* We are passing color as a prop, we also set its value to pink*/}
      <Headline color="pink">
        Standard Blue headline
      </Headline>
    </>
  );
}
export default App;

위의 코드에서는 color 속성에 대한 props로 전달된 내용에 따라 Headline의 색상을 동적으로 설정합니다. ${props => props.color}와 같은 코드 조각을 작성하여 props에 액세스할 수 있으며 JSX에서는 <Headline color="pink">.....</Headline>와 같이 설정합니다.

9] <body> 및 <html>을 대상으로 하는 전역 스타일을 적용하는 방법 또는 스타일 재설정 위치를 지정하는 방법.

import styled,{createGlobalStyle} from 'styled-components';
// Remember to import createGlobalStyle as above

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

    body {
        background: teal;
        font-family: Open-Sans, Helvetica, Sans-Serif;
    }
`;

function App() {
  return (
    <> {/*Place the GlobalStyle tag at the very top of your app component tree.*/}
      <GlobalStyle />
      <h1>
        This is a landing page
      </h1>
    </>
  );
}

다음과 같이 styled-components에서 createGlobalStyle을 가져오는 것을 기억하십시오: import styled,{createGlobalStyle} from 'styled-components'; . 앱 구성 요소 트리의 맨 위에 태그를 배치할 수 있습니다.

스타일이 지정된 구성 요소를 즐기시기 바랍니다.

따라서 스타일 구성 요소에 대한 이 소개 치트 시트가 다음 프로젝트에서 도움이 되기를 바랍니다. 이것은 빙산의 일각에 불과하다는 것을 기억하십시오. 당신은 그것으로 많은 것을 할 수 있습니다.