Is.js로 더 나은 조건부 렌더링

조건부 렌더링이란

Conditional rendering라는 용어는 특정 조건에 따라 다른 UI 마크업을 렌더링하는 기능을 설명합니다. React-Speak에서 조건에 따라 다른 요소나 구성 요소를 렌더링하는 방법입니다. 이 개념은 다음 시나리오에서 자주 적용됩니다.

API에서 외부 데이터 렌더링

요소 표시/숨기기

응용 프로그램 기능 전환

권한 수준 구현

인증 및 권한 부여

가독성 문제

UserInfo 구성 요소를 예로 들어 보겠습니다. h1를 렌더링하려면 먼저 사용자 개체를 데이터로 채워야 합니다. 이를 달성하기 위해 Logical&&을 사용하여 왼쪽이 조건을 충족하지 못하는 경우 표현식의 오른쪽이 렌더링되지 않도록 차단합니다. 이것은 단락 평가라고도 합니다.

function UserInfo({user}) {
  return (
    (user !== {}) && <h1>{user.name}</h1>
  )
}

이 형식은 작업을 완료하는 동안 구성 요소의 '의미'를 빠르게 추론하려고 할 때 개발자를 잘못 이끌 수 있습니다. 문제는 렌더링이 배열 길이에 의존할 때 특히 분명합니다.

function UsersList({users}) {
    return (
        (users && users.length > 0) &&
            users.map(user => <UserInfo user={user} />)
    )
}

이것은 객관적으로 보기 흉하고 중첩&& 연산자는 중첩 삼항만큼 나쁩니다.

편리한 솔루션

Is.js는 at only 4kb when gzipped 응용 프로그램의 총 패키지 크기에 많은 추가 없이 이 가독성 문제를 해결하는 마이크로 라이브러리입니다. 많은 기능이 포함되어 있지만 조건부 렌더링을 보다 선언적이고 읽기 쉽게 만드는 데 도움이 되는 부분에만 초점을 맞출 것입니다.

시작하려면 앱에 is.js를 설치하세요.

npm install is_js

이제 모든 파일에 is_js를 포함할 수 있습니다.

// src/app.js
import React from "react"
import is from "is_js"
...

예

비어 있는지 확인

function UserInfo({user}) {
    return (
        is.not.empty(user) &&
            <h1>{user.name}</h1>
    )
}

function UsersList({users}) {
    return (
        is.not.empty(users) &&
            users.map(user => <UserInfo user={user} />)
    )
}

이 코드의 의도는 개발자가 즉시 읽을 수 있기 때문에 훨씬 더 명확합니다. 해석이 필요하지 않습니다.