반응 팁 — 조건부

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 조건식과 문장을 렌더링하기 위한 몇 가지 팁을 살펴보겠습니다.

조건부 IIFE

JSX에 조건식을 추가하는 것은 까다로운 부분이 있습니다. JSX 코드 내에서 조건문을 렌더링하려면 표현식만 사용할 수 있습니다. 따라서 JSX 내부에서 if 블록을 쉽게 사용할 수 없습니다.

즉시 호출 함수 표현식(IIFE)의 한 가지 좋은 용도는 조건문을 익명 함수 안에 넣은 다음 즉시 호출하는 것입니다.

예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

import React from "react";

export default function App() {
  const [num, setNum] = React.useState(1);
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>
      <p>
        {(() => {
          if (num === 1) {
            return "one";
          } else if (num === 2) {
            return "two";
          } else if (num === 3) {
            return "three";
          } else if (num === 4) {
            return "four";
          } else if (num === 5) {
            return "five";
          }
        })()}
      </p>
    </div>
  );
}

위의 코드에는 if 블록이 있는 IIFE가 있습니다.

(() => {
 if (num === 1) {
   return "one";
 } else if (num === 2) {
    return "two";
 } else if (num === 3) {
    return "three";
 } else if (num === 4) {
    return "four";
 } else if (num === 5) {
    return "five";
 }
})()

표현식이므로 JSX 코드 내부에 있을 수 있습니다. 이 예에서 if...else를 하나switch로 대체할 수도 있습니다.

또한 다음과 같이 JSX 외부로 함수를 이동하고 JSX 코드 내부에서 호출할 수 있습니다.

import React from "react";

export default function App() {
  const [num, setNum] = React.useState(1);
  const getResult = () => {
    if (num === 1) {
      return "one";
    } else if (num === 2) {
      return "two";
    } else if (num === 3) {
      return "three";
    } else if (num === 4) {
      return "four";
    } else if (num === 5) {
      return "five";
    }
  };
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>
      <p>{getResult()}</p>
    </div>
  );
}

위의 코드는 JSX 코드 안에 큰 IIFE를 넣는 것보다 깨끗합니다.

&& 운영자

JSX 코드 내부에 조건부로 무언가를 표시하려면 다음과 같이 && 연산자를 사용할 수 있습니다.

import React from "react";

export default function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      <p>{show && <span>foo</span>}</p>
    </div>
  );
}

위의 코드에는 show 표시 여부를 제어하는 ​​<span>foo</span> 부울 값이 있습니다. 단락 평가로 인해 show가 true인 경우 표시됩니다.
show가 true인 경우 두 피연산자가 &&를 반환하면 true 연산자가 true를 반환하므로 두 번째 피연산자가 평가됩니다.

삼항 연산자

조건이 true인 경우 한 가지를 표시하고 동일한 조건이 false인 경우 다른 것을 표시하려는 또 다른 경우  . 주어진 조건이 true이면 한 가지를 반환하고 주어진 조건이 false이면 다른 것을 반환하는 삼항 연산자로 이를 수행할 수 있습니다.

예를 들어 다음과 같이 버튼을 클릭했을 때 'foo'와 'bar'를 표시하는 토글을 만들 수 있습니다.

import React from "react";

export default function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(show => !show)}>Toggle</button>
      <p>{show ? <span>foo</span> : <span>bar</span>}</p>
    </div>
  );
}

별도의 프레젠테이션 구성 요소

마지막으로 반환 문을 작성하여 결과로 보고 싶은 JSX 코드를 조건부로 반환할 수 있습니다. IIFE 내부에 있는 코드를 다른 구성 요소로 이동한 다음 버튼을 클릭하여 생성된 결과를 전달한 다음 다른 prop의 값에 따라 표시하려는 항목을 반환할 수 있습니다.

예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

import React from "react";

const Result = ({ num }) => {
  if (num === 1) {
    return <p>one</p>;
  } else if (num === 2) {
    return <p>two</p>;
  } else if (num === 3) {
    return <p>three</p>;
  } else if (num === 4) {
    return <p>four</p>;
  } else if (num === 5) {
    return <p>five</p>;
  }
};

export default function App() {
  const [num, setNum] = React.useState(1);
  return (
    <div className="App">
      <button onClick={() => setNum(Math.ceil(Math.random() * 5))}>Draw</button>{" "}
      <Result num={num} />
    </div>
  );
}

위의 코드에서 if...else 블록을 다른 구성 요소로 옮겼습니다. Result는 num 소품을 가져와서 거기에 무엇이 있는지 표시하는 프리젠테이션 구성 요소이기 때문에 이것은 더 깔끔합니다. App 컴포넌트에는 메인 로직이 있습니다.

위의 코드는 컨테이너와 프리젠테이션 구성 요소를 깔끔하게 분리한 예입니다. 컨테이너 구성 요소에는 논리가 있고 프레젠테이션 구성 요소에는 주어진 내용이 표시됩니다.

결론

조건문은 JSX를 사용하는 React 구성 요소에서 여러 가지 방법으로 작성할 수 있습니다. 단일 요소 또는 구성 요소를 조건부로 표시하는 것과 같은 가장 간단한 조건의 경우 && 연산자를 사용할 수 있습니다.

단일 조건에 따라 2개의 구성요소와 요소 사이를 전환할 수 있도록 하려면 삼항 연산자를 사용할 수 있습니다.

코드에 if...else 명령문을 추가하기 위해 기존 구성 요소에 함수를 추가하여 JSX 코드 내 IIFE, 구성 요소 내 별도의 함수 또는 프리젠테이션에만 사용되는 별도의 구성 요소로 결과를 반환할 수 있습니다.