React 구성 요소의 조건부 렌더링

이 블로그 게시물은 JavaScript의 상위 집합인 React 및 Typescript를 사용합니다. 초보자인 경우 this post을 확인하여 전제 조건을 얻을 수 있습니다.

UI는 애니메이션, 데이터 호출 또는 변경과 같은 이벤트로 만들어집니다.

이러한 모든 상태를 처리하기 위해 Facebook에서 만든 강력한 프런트 엔드 라이브러리인 React의 기능을 사용할 수 있습니다. 구성 요소 트리를 사용하여 요소를 숨기거나 표시하고 CSS 클래스를 추가하거나 제거할 수 있습니다. React 및 Typescript는 제어할 수 있는 많은 레시피를 제공합니다.

조건부 렌더링을 사용하여 구성 요소 또는 구성 요소 내부의 JSX를 렌더링하는 다양한 예를 보여 드리겠습니다.

IF 문 사용

IF 문은 접할 수 있는 가장 기본적인 조건부 렌더링입니다.

조건이 충족되면 요소를 표시하는 데 사용할 수 있습니다. 아래 코드에서 구성 요소 ItemList는 목록이 비어 있으면 null을 반환합니다.

import { FunctionComponent } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {
  if (list.length === 0) {
    return null;
  }
  return (
    <ul>
      {list.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
};

function App() {
  const list: Array<string> = [];
  return (
    <div className="App">
      <ItemsList list={list} />
    </div>
  );
}

export default App;

IF/ELSE 문 사용

IF 문과 달리 IF/ELSE를 사용하면 다른 문을 대안으로 추가할 수 있습니다. 아래 코드에서 ItemsList 구성 요소는 목록 크기에 대한 메시지를 반환합니다.

import { FunctionComponent } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {

  let listLength;

  if (list.length === 0) {
    listLength = "No items";
  } else {
    listLength = "We have at least one item";
  } 

  return (
    <>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <p>{listLength}</p>
    </>
  );
};

function App() {
  const list: Array<string> = [];
  return (
    <div className="App">
      <ItemsList list={list} />
    </div>
  );
}

export default App;

삼항 연산자 사용

삼항 연산자를 사용하면 IF/ELSE 문과 달리 JSX에서 사용할 수 있다는 장점이 있습니다. 마지막 예를 삼항 식으로 바꿀 수 있습니다.

import { FunctionComponent } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {
  return (
    <>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <p>{list.length === 0 ? "No items" : "We have at least one item"}</p>
    </>
  );
};

function App() {
  const list: Array<string> = [];
  return (
    <div className="App">
      <ItemsList list={list} />
    </div>
  );
}

export default App;

단락 연산자 사용

Javascript에서 표현식은 왼쪽에서 오른쪽으로 평가됩니다. 표현식의 왼쪽이 거짓이면 나머지 조건은 결과에 영향을 미치지 않습니다.

작동 중인 단락을 보려면 아래 코드를 보십시오.

import { FunctionComponent } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {
  return (
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
  );
};

function App() {
  const list: Array<string> = [];
  return (
    <div className="App">{list.length > 0 && <ItemsList list={list} />}</div>
  );
}

export default App;

이 예에서는 다음과 같이 두 번째 부분을 null로 대체하여 대신 삼항 연산자를 사용할 수 있습니다.

<div className="App">{list.length > 0 ? <ItemsList list={list} /> : null}</div>

단락을 사용하면 표현이 더 간결해집니다.

스위치/케이스 사용

switch/case 문은 변수를 스위치로 사용하고 제공하는 각 사례에 대한 결과를 제공합니다. 기본값은 특별한 경우입니다. 대체품으로 사용됩니다.

break 문은 중요하며 스위치로의 경로를 중지합니다.

import { FunctionComponent } from "react";

interface ItemsListProps {
  list: Array<string>;
}

const ItemsList: FunctionComponent<ItemsListProps> = ({ list }) => {
  let listLength;
  switch (list.length) {
    case 0:
      listLength = "no items";
      break;
    case 1:
      listLength = "1 item";
      break;
    default:
      listLength = `${list.length} items`;
      break;
  }
  return (
    <>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <p>{listLength}</p>
    </>
  );
};

function App() {
  const list: Array<string> = ["item 1", "item 2", "item 3"];
  return (
    <div className="App">
      <ItemsList list={list} />
    </div>
  );
}

export default App;

스위치/케이스는 이와 같은 자체 호출 기능을 제외하고는 JSX에서 사용할 수 없습니다.

<p>
  {() => {
    let listLength;
    switch (list.length) {
      case 0:
        listLength = "no items";
        break;
      case 1:
        listLength = "1 item";
        break;
      default:
        listLength = `${list.length} items`;
        break;
    }
    return listLength;
  }}
</p>

결론

React 앱을 빌드할 때 조건부 렌더링을 매우 자주 사용하게 됩니다. 렌더링에 가장 적합한 접근 방식을 선택하기 위해 코딩하기 전에 생각하십시오.

이 게시물은 Typescript를 사용한 React의 기초에 대한 시리즈입니다. 다시 확인하거나 소셜 미디어에서 저를 팔로우하여 다음 단계를 알아보세요.

나중에 봐요!