반응에서 조건부 렌더링을 구현하는 방법.

여러분, 안녕하세요,
이 기사에서는 반응 요소를 조건부로 렌더링하는 방법을 이해합니다.

React를 사용하면 다양한 조건에 따라 UI 마크업을 렌더링할 수 있습니다. 반응에서 조건부 렌더링을 구현하는 더 많은 방법이 있을 수 있지만 가장 일반적으로 사용되는 몇 가지 사항만 논의하겠습니다.

조건부 렌더링을 명확하게 이해하기 위해 간단한 예를 들어보겠습니다. 앱 로그인 및 로그아웃에 두 개의 버튼이 있다고 가정합니다.
우리의 요구 사항은 로그인할 때 Logout 버튼이 표시되어야 하고 로그아웃할 때 Login 버튼이 표시되어야 하는 것과 같습니다.

그래서 우리는 이 문제를 어떻게 해결할 것인가.

하나씩 살펴보겠습니다.

if else 문을 사용하여.

if else 블록을 실행하는 동안 조건이 충족되면 if 블록 내부의 코드가 실행되고 그렇지 않으면 else 블록 내부의 코드가 실행됩니다.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  const displayButton = () => {
    if (isLoggedin) {
      return <button>Logout</button>;
    } else {
      return <button>Login</button>;
    }
  };
  return (
    <div>
      <h1>Conditional rendering</h1>
      {displayButton()}
    </div>
  );
};

jsx에서 자바스크립트 표현식을 작성할 수 있다는 것을 알고 있으므로 어떤 조건이 true이고 특정 반환된 요소만 렌더링되는지에 따라 button 요소를 반환하는 하나의 함수를 작성했습니다.

요소 변수를 사용하여.

이 접근 방식에서는 jsx 표현식에서 javascript 함수를 사용하는 대신 jsx 요소 변수를 사용합니다. jsx 요소의 값은 이전 접근 방식과 같은 조건에 따라 결정됩니다.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  let Button;

  if (isLoggedin) {
    Button = <button>Logout</button>;
  } else {
    Button = <button>Login</button>;
  }

  return (
    <div>
      <h1>Conditional rendering</h1>
      {Button}
    </div>
  );
};

위의 예에서는 Button 변수를 jsx 요소로 사용하고 있으며 그 값은 isLoggedin 상태에 따라 할당됩니다.

삼항 연산자를 사용하여

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin ? <button>Logout</button> : 
      <button>Login</button>}
    </div>
  );
};

위의 예에서는 컴포넌트 함수에서 조건을 사용하는 대신 jsx 표현식 자체에 조건을 적용하고 있습니다. 조건을 적용하기 위해 삼항 연산자를 사용하고 있습니다. 삼항 연산자는 세 개의 피연산자를 사용한다는 것을 알고 있습니다. 첫 번째는 조건 자체, 두 번째는 조건이 충족되면 반환되는 결과이고 세 번째는 조건이 충족되지 않을 때 반환됩니다. .

논리&& 연산자를 사용하여.

이 접근 방식도 이전 접근 방식과 약간 유사하지만 이 접근 방식에서는 삼항 연산자 대신 논리&& 연산자를 사용합니다.

const Home = () => {
  const [isLoggedin, setIsLoggedin] = useState(true);

  return (
    <div>
      <h1>Conditional rendering</h1>
      {isLoggedin && <button>Logout</button>}
      {!isLoggedin && <button>Login</button>}
    </div>
  );
};

위의 예에는 button 상태를 기반으로 isLoggedin 요소를 렌더링하기 위한 두 개의 jsx 표현식이 있으며 적절한 jsx 표현식이 평가됩니다.

더 많은 접근 방식이 있을 수 있지만 위에서 언급한 접근 방식이 일반적으로 사용됩니다.

이 게시물이 도움이 되었기를 바랍니다.