함수식 프로그래밍으로 스타일화된 구성 요소 테마 구성하기

본고를 통해, 나는 스타일화된 구성 요소를 사용하여React 응용 프로그램에 테마를 설정하는 방법과, 함수식 프로그래밍 실천을 통해 구조화되고 읽을 수 있는 방식으로 그것을 실현하는 방법을 보여 드리겠습니다.

스타일 지정 어셈블리
스타일링 어셈블리는 JS 라이브러리의 CSS입니다.2019년 CSS 상태 조사에 따르면 JS 솔루션 중 CSS를 선택한 사람들styled-components은 가장 인기 있는 선택 중 하나이다.가장 좋은 ES6 및 CSS를 제공하는 이유는 이해하기 어렵지 않습니다.
구성 요소의 스타일을 설계하기 위해 템플릿 텍스트에 CSS를 작성합니다.구성 요소의 스타일은 구성 요소 도구를 받아들이는 함수를 템플릿 텍스트에 전달해서 조정할 수 있습니다.

const StyledButton = styled.button`
    height: 40px;
    background-color: ${props => props.primary
        ? 'white'
        : 'blue'
    };
`;

구성 요소 기반 도구background-color의 단추 구성 요소 스타일을 조정합니다.
스타일링 구성 요소는 설정에 제공된 값에 접근할 수 있도록 테마 대상을 도구에 추가합니다.이전의 코드도 테마 값을 적용하기 위해 이렇게 작성되었다.

const StyledButton = styled.button`
    background-color: ${props => props.primary
        ? props.theme.color.white
        : props.theme.color.blue
    }
`;

주제가 많을 때, 이 주제들을 방문하면 혼란스러워질 수 있습니다.

함수식 프로그래밍
FP가 여기서 어떻게 역할을 하고 있죠?FP는 그 자체의 주제이지만 본고에서 우리가 필요로 하는 관건적인 개념은 함수 합성과 함수 집합이다.다음은 간단한 설명과 예입니다.

함수 카레
curried 함수는 한 번에 여러 개의 매개 변수를 받아들이는 함수입니다.

const add = x => y => x + y;

첫 번째 함수는 첫 번째 매개 변수 변수primary를 받아들이고 두 번째 매개 변수 변수x를 받아들이려는 다른 함수y와 x의 합을 되돌려준다.

기능 조합
함수 조합의 가장 간단한 표현은 여러 함수를 조합해서 새로운 함수를 만드는 것이다.

const addDash = x => `${x}-`;
const oneDash = add(addDash(1));

oneDash(2); // outputs '1-2'

y 함수는 문자열을 되돌려주고 매개 변수의 끝에 대시를 추가합니다.addDash에 전달되면 함수를 되돌려줍니다. 이 함수는 첫 번째 파라미터와 두 번째 파라미터 사이에 대시가 있는 문자열을 되돌려줍니다.

람다
이 문서에서 가장 좋아하는 FP 유틸리티 라이브러리Ramda를 사용하여 프레젠테이션을 수행합니다.그것은 우리에게 작성할 수 있는 작은 함수 라이브러리를 제공했다.이것은 대부분의 React 프로젝트에서 사용하는 방법입니다. 자바스크립트 프로젝트에 FP를 적용하는 것을 좋아하신다면 시도해 보십시오.

설치 프로그램
테마 값은 스타일링 구성 요소가 있는 add에서 제공됩니다.설정하기

const theme = {
    color: {
        white: '#ffffff',
        primary: '#3b49df'
    }
};

const Layout = ({ children }) => (
    <ThemeProvider theme={theme}>
        {children}
    </ThemeProvider>
);

액세서리
액세서리는 액세서리 값의 함수다.순수한javascript로 작성된 간단한ThemeProvider 액세서리는 다음과 같습니다.

const theme = props => props.theme

우리는curry를 사용하여 갈수록 복잡해지는 액세서리 함수를 조합할 것이다.색상 액세스기를 예로 들겠습니다.

import { path } from 'ramda';

const theme = (keys = []) =>
    props => path(['theme', ...keys], props);

const color = key => theme(['color', key]);

Ramda의 props.theme 함수는 전송된 경로 (수조 형식) 에 따라 값을 되돌려줍니다.path 액세서리는 함수를 되돌려줍니다. 이 함수는props를 매개 변수로 하고 테마 대상으로 되돌려줍니다.theme 액세서리는 color 액세서리와compose를 하나의 함수로 조합하고 이 함수는 props를 매개 변수로 하고 color 대상으로 되돌려줍니다.
우리의 도구와 물체의 형상을 감안하면...

const props = {
    theme: {
        color: {
            white: '#ffffff'
        }
    }
};

화이트 theme 의 값을 얻기 위해, "화이트"로color accessor를 호출합니다. 이것은 함수를 되돌려줍니다. 이 함수는props를 매개 변수로 해야 합니다.우리는 이렇게 할 수 있다...

color('white')(props); // outputs '#ffffff'

순수한javascript에서 이 점을 보면, 이것은... 에 해당한다.

const whiteColor = props => props.theme.color.white;

whiteColor(props) // outputs '#ffffff'

스타일링 구성 요소의 템플릿 텍스트 개구멍에는 props를 매개 변수로 하는 함수가 필요하기 때문에, 코드를 간단하게 유지하기 위해 이 액세서리를 전송할 수 있습니다.

const StyledButton = styled.button`
    color: ${color('white')};
`

// is equivalent to
const StyledButton = styled.button`
    color: ${props => props.theme.color.white};
`

위의 코드 세션에서 코드에 대한 영향이 얼마나 큰지 알 수 있다.더 복잡한 접근기는 조수 함수를 사용하여 조합할 수 있다.

import { pipe } from 'ramda';

const props = {
    theme: {
        space: 10
    }
};

const space = (multiplier = 1) => pipe(
    theme(['space']),
    space => space * multiplier,
    space => `${space}px`
);

space(2)(props) // outputs '20px'

#ffffff 여러 기능을 연결하여 하나의 큰 기능을 만들 수 있습니다.우리는 pipe 액세서리를 다른 두 함수와 연결하여 한 함수에 공간(10)의 기본값을 곱하고 다른 함수에 space 단원을 부가하여 px의 최종 출력을 얻을 것이다.

조력자
Helper 함수는 SASS의 mixin과 같이 함수를 더 잘 조합하는 데 도움을 줍니다.다음과 같은 간단한 방법으로 시작하실 수 있습니다.

부가 단원

const px = x => `${x}px`;

계산과 참조에 편리하도록 모든 고정 치수의 컴포넌트는 단위 없이 수치로 제공되어야 합니다.유사 20px 함수는accessor 함수를 사용하여 px 단원을 크기 값에 추가할 수 있도록 합니다.

미디어 쿼리

const mobile = x => css`
    @media all and (max-width: ${breakpoint('sm')} {
        ${x}
    }
`

휴대전화 스타일에 대한 간단한 미디어 조회.이것은 당신의 매체 조회를 간단명료하게 보일 것이다.

const StyledSection = styled.section`
    height: 100vh;

    ${mobile(css`
        height: auto;
    `)}
`

px는 양식화된 구성 요소가 제공한 전달 도구에 사용되는 기능이다.

유닛 변환기

const pxToRem = x => `${x / 16}rem`;

사용자 브라우저 설정에 따라 배율이 조정되므로 값(즉, 채우기, 여백, 글꼴 크기)을 css으로 설정하는 것이 좋습니다.그러나 이것은 확실히 약간의 계산이 필요하다.나는 나의 값을 px로 설정하는 것을 좋아하고, 작은 조수 함수가 px값을rem로 변환하는 것을 좋아한다. 이렇게 하면 나는rem 단위를 적용할 수 있고, 너무 많은 것을 고려하지 않아도 된다.

구현
다음은 코드 세션입니다. 당신의 코드가 어떤 모양인지 보여 줍니다.

import styled from 'styled-components';
import { height, color, space } from 'theme';

const StyledButton = styled.button`
    height: ${height('button')}px;
    padding: 0 ${space(2)};
    border: 0;
    background-color: ${color('primary')};
    color: ${color('white')};
`;

편역하다

button {
    height: 40px;
    padding: 0 16px;
    border: 0;
    background-color: #3b49df;
    color: #ffffff;
}

결론
이렇게 하면, 양식화된 구성 요소로 테마를 설정하고, 구조화되고 읽을 수 있는 방식으로 그것을 작성할 수 있다.
저는github에 예시 항목을 설정하여 본문의 모든 내용을 참고하도록 합니다.너는 그것을 찾을 수 있다 here.
너는 나를 찾을 수 있으니, 문제가 있으면 언제든지 나에게 연락해라.
DEV와 트위터에서 저를 주목하고 더 많은 전방 개발 기교와 실천을 읽으세요.