🧶 React의 암시적 CLSX

clsx 에서 classnames 또는 React을 사용하는 것은 최근 Tailwind CSS과 같은 유틸리티 우선 CSS 프레임워크에서 추세가 되었습니다. 이 프레임워크에서는 많은 클래스를 작성해야 하며 때로는 조건문도 함께 작성해야 합니다.

Vue과 같은 프레임워크에서 왔다면 이 Class Binding 기능이 즉시 사용 가능하다는 것을 알 수 있습니다.

이 블로그 게시물에서는 React 라이브러리를 패치하여 필요할 때마다 가져오기clsx를 사용하지 않고 React에서도 기능적으로 사용할 수 있도록 하는 방법을 보여줍니다.

☢️ This is just for learning purposes. Use at your own risk

새로운 React 앱 만들기

yarn create react-app implicit-clsx
cd implicit-clsx

clsx 설치

yarn add clsx

반응 제거

yarn remove react

raw-react 이름으로 반응 설치(추가 정보)

yarn add raw-react@npm:react

원시 반응에서 내보낼 자체 React 만들기

내 반응/index.js

module.exports = require('raw-react')

my-react/jsx-runtime.js(정보)

module.exports = require('raw-react/jsx-runtime')

my-react/jsx-dev-runtime.js(정보)

module.exports = require('raw-react/jsx-dev-runtime')

반응 패키지로 my-react 설치(자세한 정보)

yarn add react@file:my-react

JSX 런타임 패치

이제 JSX Runtime을 패치하여 className를 확인하겠습니다. 힘든 일이 온다 😀



my-react/jsx-dev-runtime.js

module.exports = require('raw-react/jsx-dev-runtime')

const clsx = require('clsx').default
const jsxDEV = module.exports.jsxDEV

module.exports.jsxDEV = function() {
    if (typeof arguments[0] === 'string' && arguments[1].className) {
        arguments[1].className = clsx(arguments[1].className)
    }

    return jsxDEV.apply(undefined, arguments)
}

이제 내가 여기에 쓴 횡설수설을 설명 할 시간입니다 🤣 몇 가지만 설명하고 다른 모든 것은 분명하다고 생각합니다

arguments arguments는 해당 함수에 전달된 인수의 값을 포함하는 함수 내에서 액세스할 수 있는 배열과 같은 객체입니다.

apply apply() 메서드는 주어진 this 값과 배열(또는 배열과 유사한 객체)로 제공된 인수를 사용하여 함수를 호출합니다.

기능 서명jsxDEV은 type, props, key입니다. 따라서 arguments[0]는 type이고 arguments[1]는 props입니다.
react-dom에서 호스트 요소는 문자열만 될 수 있기 때문에 유형이 문자열인지 확인합니다. 예를 들어 일부 함수 또는 클래스 구성 요소에서 변경className을 원하지 않습니다.

두 번째로 className 소품이 있는지 확인하고 clsx 호출로 패치합니다.

함수의 마지막 줄에서 모든 것을 네이티브로 전달합니다jsxDEV.

To have this work also on build, you will need to apply this patch also to jsx and jsxs in my-react/jsx-runtime.js see repo link at the end

업데이트하려면 반응 패키지로 my-react를 다시 설치하세요.

yarn add react@file:my-react

App.js를 변경하여 변경 사항 확인

줄을 문자열로 단일className로 바꿉니다.

<div className="App">

일반적으로 전달할 수 있는 대상clsx

<div className={["App1", "App1", { "App2": true }]}>

앱을 시작하고 브라우저에서 체크인하자

yarn start

작업 예https://github.com/iamandrewluca/implicit-clsx

TypeScript 버전을 가지고 놀았지만 유형 불일치로 인해 작동하지 못했습니다. 더 많은 조사가 필요합니다.

그리고 끝났습니다! 내 블로그 게시물을 읽어 주셔서 감사합니다!



표지 사진 작성자: Ash from Modern Afflatus on Unsplash