✨ 기교가 있는 React의 조건부 렌더링

따라서 React를 사용하여 어느 정도 시간을 보냈다면 조건에 따라 요소를 렌더링해야 하는 시나리오를 접하게 될 것입니다.

예를 들어 무언가를 세는 구성 요소가 있다면 어떨까요? 그리고 구성 요소의 실제 개수를 표시하고 싶었습니다. 그러나 1 미만으로 떨어지면 그 자리에 메시지를 표시할 수 있습니다. 사용자에게 무언가를 알리거나 다른 작업을 수행하기 위한 새로운 클릭 유도문안을 제시합니다.

다음과 같이 ternary operator에 작성할 수 있습니다.

import { useState } from "react";
import RenderIf from "components/RenderIf";

export const Sample = () => {
  const [count, setCount] = useState(2);
  const increment = () => {
    let newCount = count;
    setCount((newCount += 1));
  };
  const decrement = () => {
    if (count === 0) return;
    let newCount = count;
    setCount((newCount -= 1));
  };
  return (
    <>
      <button onClick={increment}>Add</button>
      <button onClick={decrement}>Subtract</button>
       {count > 0 
           ? <p>I have {count}, and that's pretty cool.</p>
           : <p>Sorry, I'm all out.</p>
        }
    </>
  );
};

이것은 잘 작동하지만 제 생각에는 다른 옵션만큼 쉽게 읽히지 않습니다. 이 사용 사례를 처리하기 위한 구성 요소는 어떤 모습일까요?

제안

공급하는 조건에 따라 래핑하는 콘텐츠를 렌더링하는 구성 요소를 만들 수 있습니다. 해당 조건이 참이 아니면 다른 것을 렌더링합니다. 이것은 이 사용 사례를 조금 더 정교하게 처리할 것입니다. 😎

먼저 RenderIf라는 구성 요소를 만들어 보겠습니다. 아래는 JSX 및 TypeScript 버전입니다. 당신의 독을 선택하십시오.

JSX:

import { ReactNode } from "react";

const RenderIf = ({ children, isTrue, fallback }) => {
  return isTrue ? children : fallback;
};

export default RenderIf;

타입스크립트:

import { ReactNode } from "react";

type Props = {
  children: ReactNode;
  isTrue: boolean;
  fallback?: any;
};

const RenderIf = ({ children, isTrue, fallback }: Props) => {
  return isTrue ? children : fallback;
};

export default RenderIf;

무슨 일인지 설명'

우리가 만든 이 구성 요소에는 전달되는 3개의 소품이 있습니다.

아이

isTrue

대체

우리destructure는 해당 소품을 구성 요소로 전달합니다. Children은 이 ** **구성 요소가 래핑하는 모든 요소입니다. 그런 다음 isTrue 소품으로 래핑된 요소를 렌더링할 시기의 조건을 전달합니다.

이 조건이 true(또는 truthy)일 때마다 래핑된 요소를 렌더링합니다. 조건이 참이 아니면 fallback 인수에 전달하는 모든 것을 렌더링합니다.

TypeScript에서는 Props 유형에서 이것을 optional argument으로 설정했습니다. 왜요? 대체 요소를 항상 전달하고 싶지는 않을 수 있습니다. 따라서 fallback 인수 prop을 전달하지 않으면 undefined를 반환하고 빈 구성 요소가 렌더링됩니다.

의 JSX 버전에서는 자연스럽게 발생합니다.

따라서 대체 인수는 '이봐, 카운트를 벗어났습니다'라는 메시지일 수도 있고 더 많은 카운트를 구매하기 위한 버튼일 수도 있습니다. 당신은 아이디어를 얻습니다.

Jerry Maguire GIF by Jerology - Find & Share on GIPHY

이 Jerology GIF를 발견하고 아는 모든 사람과 공유하십시오. GIPHY는 GIF를 검색, 공유, 발견 및 생성하는 방법입니다.



giphy.com

앱에서 사용 예:

import { useState } from "react";
import RenderIf from "components/RenderIf";

export const Sample = () => {
  const [count, setCount] = useState(2);
  const increment = () => {
    let newCount = count;
    setCount((newCount += 1));
  };
  const decrement = () => {
    if (count === 0) return;
    let newCount = count;
    setCount((newCount -= 1));
  };
  return (
    <>
      <button onClick={increment}>Add</button>
      <button onClick={decrement}>Subtract</button>
      <RenderIf isTrue={count > 0} fallback={<p>Sorry, I'm all out.</p>}>
        <p>I have {count}, and that's pretty cool.</p>
      </RenderIf>
    </>
  );
};

가서 물건 좀 만들어

이제 React에서 조건부 요소를 렌더링하기 위해 계속해서 사용할 수 있는 편리한 구성 요소가 있습니다. 다른 작업을 수행하기 위해 이 구성 요소를 확장하고 싶을 수도 있습니다. 그 밖에 무엇을 할 수 있습니까? 어떻게 생각하는지, 그리고 다른 접근 방식을 취하고 싶은지 알려주세요.

행운과 행복한 건물. 🔨

Tom Hanks Hello GIF - GIPHY를 찾고 공유하기

이 Hello GIF를 발견하고 아는 모든 사람과 공유하세요. GIPHY는 GIF를 검색, 공유, 발견 및 생성하는 방법입니다.



giphy.com