React에서 스타일이 지정된 구성 요소를 사용하는 방법

React를 사용하면 스타일을 전역 CSS 파일에 저장하는 것이 일반적입니다. 이로 인해 특히 대규모 프로젝트에서 작업할 때 특정 구성 요소의 스타일을 찾기가 어려울 수 있습니다. 스타일이 지정된 구성 요소를 사용하면 구성 요소와 동일한 파일에 있기 때문에 특정 구성 요소에 대한 스타일을 쉽게 찾을 수 있습니다.

React 애플리케이션에서 스타일이 지정된 구성 요소를 설정하고 통합하는 방법을 살펴보겠습니다.

스타일 구성 요소 라이브러리 설치

터미널에서 다음 명령을 실행하여 styled-component를 설치할 수 있습니다.

npm i styled-components


원사를 사용하여 styled-component를 설치하려면 다음을 실행하십시오.

yarn add styled-components


스타일이 지정된 구성 요소 만들기

스타일 컴포넌트는 스타일이 있는 표준 React 컴포넌트와 같습니다. 올바른 사용을 위해 고려해야 할 중요한 스타일 구성 요소에는 다양한 장단점이 있습니다.

일반적인 구문은 다음과 같습니다.

import styled from "styled-components";


const ComponentName = styled.DOMElementTag`
    cssProperty: cssValue
`


여기에서는 styled-component 라이브러리 에서 styled를 가져옵니다 . styled 함수는 JavaScript 코드를 실제 CSS 로 변환하는 내부 메서드입니다. ComponentName 은 스타일이 지정된 구성 요소의 이름입니다. DOMElementTag 는 div, span, 버튼 등과 같이 스타일을 지정하려는 HTML/JSX 요소입니다.

스타일 구성 요소를 사용하여 스타일 버튼을 만들려면 먼저 버튼 요소가 포함된 React 구성 요소를 만듭니다.

이렇게:

import React from "react";


function Button() {
    return (
        <button>Welcome!!!</button>
    )
}


이제 styled-components를 사용하여 버튼 스타일을 만들 수 있습니다.

import styled from "styled-components";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

모든 것을 종합하면 버튼 태그를 StyledButton 구성 요소 로 교체해야 합니다 .

import styled from "styled-components";
import React from "react";


const StyledButton = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function Button() {
    return (
        <StyledButton>Welcome!!!</StyledButton>
    )
}


중첩 스타일

스타일이 지정된 구성 요소로 작업할 때 스타일을 중첩할 수도 있습니다. 중첩 스타일 컴포넌트는 SASS/SCSS Extension Language를 사용하는 것과 비슷합니다. 구성 요소에 여러 요소 태그가 포함되어 있고 각 태그의 스타일을 개별적으로 지정하려는 경우 스타일을 중첩할 수 있습니다.

예를 들어:

import React from 'react';


function App() {
    return (
        <div>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </div>
    )
}


이 코드는 h1 요소와 p 요소를 포함하는 구성 요소를 만듭니다 .

스타일이 지정된 구성 요소의 중첩 스타일 지정 기능을 사용하여 이러한 요소의 스타일을 지정할 수 있습니다.

import React from 'react';
import styled from 'styled-components';


const StyledApp = styled.div`
    color: #333333;
    text-align: center;

function App() {
    return (
        <StyledApp>
            <h1>Styled Components</h1>
            <p>Welcome to styled-components</p>
        </StyledApp>
    )
}


이 코드는 스타일이 지정된 구성 요소를 사용하고 h1 및 p 태그 에 대한 스타일을 중첩합니다 .

변수 생성 및 사용

변수를 생성하는 기능은 styled-components 라이브러리의 놀라운 기능입니다. 이 기능은 JavaScript 변수를 사용하여 스타일을 결정할 수 있는 동적 스타일을 부여합니다.

styled-component에서 변수를 사용하려면 변수를 만들고 여기에 CSS 속성 값을 할당합니다. 그런 다음 해당 변수를 CSS에서 직접 사용할 수 있습니다. 예를 들면 다음과 같습니다.

import styled from "styled-components";


const MainColor = "red";

function App() {
    return (
        <>
            <Heading>Hello World!</Heading>
        </>
    );
}


위의 코드 블록에서 ” Hello World! ”는 빨간색으로 표시됩니다.

이 예제는 단순히 스타일이 지정된 구성 요소와 함께 템플릿 리터럴의 표준 JavaScript 변수를 사용합니다. CSS 변수를 사용하는 것과는 다른 접근 방식입니다.

스타일 확장

스타일이 지정된 구성 요소를 만든 후 구성 요소를 활용합니다. 상황에 따라 미묘한 차이를 만들거나 더 많은 스타일을 추가할 수 있습니다. 이런 경우 스타일을 확장할 수 있습니다.

스타일을 확장하려면 styled() 생성자 에서 스타일 구성 요소를 래핑한 다음 추가 스타일을 포함합니다.

이 예제에서 PrimaryButton 구성 요소는 Button 구성 요소의 스타일을 상속하고 다른 배경색인 파란색을 추가합니다.

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button>Welcome</Button>
        <PrimaryButton>Hello There!</PrimaryButton>
    )
}


를 소품 으로 사용하여 스타일이 지정된 구성 요소가 렌더링하는 태그를 변경할 수도 있습니다 .

as 소품 을 사용하면 스타일이 지정된 구성 요소가 렌더링되는 기본 HTML/JSX 요소를 지정할 수 있습니다.

예를 들어:

import styled from "styled-components";
import React from "react";


const Button = styled.button`
    padding: 1rem 0.8rem;
    border-radius: 15px;
    background-color: gray;
    color: #FFFFFF;
    font-size: 15px;
`

function App() {
    return (
        <Button as='a' href='#'>Welcome</Button>
    )
}


이 코드는 버튼 구성 요소를 요소 로 렌더링하여 href 속성 을 ‘#’으로 설정합니다 .

전역 스타일 만들기

스타일이 지정된 구성 요소는 일반적으로 구성 요소로 범위가 지정되므로 응용 프로그램 전체의 스타일을 지정하는 방법이 궁금할 수 있습니다. 전역 스타일 지정을 사용하여 응용 프로그램의 스타일을 지정할 수 있습니다.

Styled-Components는 스타일을 전역적으로 선언할 수 있는 createGlobalStyle 함수를 제공합니다. createGlobalStyle은 구성 요소 범위 지정 스타일의 제약을 제거하고 모든 구성 요소에 적용되는 스타일을 선언할 수 있도록 합니다.

전역 스타일을 만들려면 createGlobalStyle 함수를 가져오고 필요한 스타일을 선언합니다.

예를 들어:

import {createGlobalStyle} from 'styled-components';


const GlobalStyles = createGlobalStyle`
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

export default GlobalStyles;


그런 다음 GlobalStyles 구성 요소를 앱 구성 요소로 가져 와서 렌더링합니다. 앱 구성요소에서 GlobalStyles 구성요소를 렌더링하면 애플리케이션에 스타일이 적용됩니다.

이렇게:

import React from 'react';
import GlobalStyles from './Global';


function App() {
    return (
        <div>
            <GlobalStyles />
        </div>
    )
}


스타일이 지정된 구성 요소에 대한 추가 정보

React 애플리케이션에서 styled-component를 설정, 설치 및 사용하는 방법을 배웠습니다. styled-components 라이브러리는 React 애플리케이션의 스타일을 지정하는 효율적인 방법입니다. 스타일링 및 동적 스타일링의 유연성을 허용하는 많은 유용한 기능을 제공합니다.

애니메이션과 같은 스타일이 지정된 구성 요소에는 더 많은 것이 있으며 React는 그 외에도 배울 것이 많은 큰 프레임워크입니다.