React 조건 렌더링 모범 사례 요약(7가지)

React에서 조건 렌더링은 여러 가지 방식을 통해 할 수 있으며, 서로 다른 사용 방식과 장면은 서로 다른 상하문에 달려 있다.본고에서, 우리는 React의 조건을 렌더링하기 위해 더 좋은 코드를 작성하는 모든 방법을 토론할 것이다.
조건 렌더링은 모든 프로그래밍 언어 (javascript 포함) 에서 흔히 볼 수 있는 기능입니다.자바스크립트에서, 우리는 일반적으로ifelse문장, switchcase문장과 삼원 연산자 작성 조건을 사용합니다.
위의 모든 메서드는 React에 적용됩니다.문제는 우리가 어떻게 해야만 그것들을 효과적으로 사용할 수 있습니까?
알다시피, React는 JSX 표시를 가지고 있으며, 일반적으로 우리는 조건 논리를 실현하여 구성 요소를 제어해야 한다.단, 우리는 JSX에서 흔히 볼 수 있는 ifelse나 switchcase 문장을 직접 사용할 수 없습니다.
JSX에서 우리는 삼원 연산자와 & & 연산자 같은 다른 조건 렌더링 방법을 사용해야 한다.여기서 우리는 더 많은 세부 사항을 토론할 것이다.
다음은 React에서 사용할 수 있는 7가지 기준 렌더링 방법입니다.모든 방식은 일정한 상황에서 자신의 우세를 가지고 있다.
카탈로그

If Else 조건 렌더링

3원 연산자를 사용하여 조건 렌더링

& & 연산자의 조건 렌더링

switch case 다중 조건 렌더링

열거 객체에 대한 다중 조건 렌더링

HOC(고급 어셈블리) 조건 렌더링

외부 라이브러리가 있는 JSX 기준 렌더링

1. If Else 조건 렌더링
모범 사례 개요

JSX 태그 이외의 장소에서 사용

또는, if-else 블록에서 여러 줄 코드를 실행하고 싶다면

이것은 모든 프로그래머들이 생각할 수 있는 첫 번째 방법, 즉 흔히 볼 수 있는 if-else 문장이다.React 프로젝트 중 어디에서나 사용할 수 있습니다.
React에서 if나else 블록 내부나 JSX 외부 어느 곳에서든 여러 줄 코드를 실행하려면 일반적인 if-else 문장을 사용하는 것이 좋습니다.
예를 들어 사용자가 로그인하면 코드를 실행하고 싶습니다.

// * Conditional rendering with common if-else statement.
if (isLoggedIn) {
 setUserProfile(userData);
 setUserHistory(userHistory);
 // other block of codes;
} 

또는 사용자 역할에 따라 접근할 수 있는 내용을 정의하고 싶을 때.

if (userProfile.role === "superadmin") {
 initSuperAdminFunction();
 initSuperAdminComponent();
 // other block of codes;
} else if (userProfile.role === "admin") {
 initAdminFunction();
 initAdminComponent();
 // other block of codes;
} else {
 initUserComponent();
 // other block of codes;
} 

만약 한 줄의 코드만 실행하고 싶다면, 예를 들어if나else 블록에서 함수를 호출하면, 괄호를 삭제할 수 있습니다.

if (userProfile.role === "superadmin") initSuperAdminComponent();
else if (userProfile.role === "admin") initAdminFunction();
else initUserComponent(); 

if-else에서 괄호가 없는 조건은 바로 아래의 코드에만 적용됩니다.
JSX의 if else 문장
JSX의 괄호 {}에 자바스크립트 코드를 주입하고 혼합할 수 있다는 것을 알 수 있습니다.하지만 한계가 있다.
너는 그 안에 if-else 문장을 직접 삽입할 수 없다.JSX에 if-else 문장을 주입하면 다음과 같이 함수 표현식(IIFE)을 즉시 호출할 수 있습니다.

return (
 <div>
  {(() => {
   if (isLoggedIn) {
    return <div>I'm logged in.</div>;
   }
  })()}
 </div>
); 

보시다시피 if문장만 너무 지루합니다.이것이 바로 내가 JSX에서 if-else 문장을 사용하는 것을 건의하지 않는 이유다.
JSX의 추가 렌더링 방법에 대해 계속 읽어 보십시오.
2. 삼원 연산자를 사용하여 조건 렌더링
모범 사례 개요

조건 변수 또는 함수 반환값 부여

코드를 한 줄만 써서 조건 판단을 하려면

JSX에서 조건 렌더링

삼원 연산자는 흔히 볼 수 있는if-else 문장의 단축 방식이다.삼원 연산자를 사용하면 줄 안에서 조건을 작성할 수도 있고, 코드를 한 줄만 작성할 수도 있다.
조건 렌더링의 변수 값 할당 예시를 살펴보겠습니다.

// Conditional rendering with common if else
let isDrinkCoffee;
if (role === "programmer") {
 isDrinkCoffee = true;
} else {
 isDrinkCoffee = false;
}

// Conditional rendering with ternary operator
let isDrinkCoffee = role === "programmer" ? true : false; 

함수 반환 값의 조건 렌더링 예제입니다.

// Conditional rendering with common if else
function isDrinkCoffee(role) {
 if (role === "programmer") {
  return true;
 } else {
  return false;
 }
}

// Conditional rendering with ternary operator
function isDrinkCoffee(role) {
 return role === "programmer" ? true : false;
} 

보시다시피, 당신은 삼원 연산자를 사용하고, if-else 문장을 대체하기 위해 한 줄의 코드를 사용합니다.
if-else를 즉시 호출 함수 표현식(IIFE)과 함께 사용하지 않고 JSX에서 삼원 연산자를 사용할 수도 있습니다.
만약 우리가 isShow 상태를 바탕으로 조건부로 작은 구성 요소를 렌더링해야 한다고 가정합니다.이렇게 기준 렌더링을 작성할 수 있습니다.

return <div>{isShow ? <SmallComponent /> : null}</div>;

if-else if-else 삼원 연산자 사용하기
위의 예에서, 나는 단지 너에게 if-else 문장을 어떻게 삼원 연산자로 대체하는지 보여줄 뿐이다.
삼원 연산자는 여러 조건 렌더링 (if-else if-else) 이나 중첩된 조건 렌더링을 대체하는 데도 사용할 수 있습니다.
그러나, 나는 네가 그것을 사용하는 것을 건의하지 않는다. 왜냐하면 그것은 일반적인 if-else 문장보다 더 읽기 어렵기 때문이다.
JSX에서 중첩된 조건 렌더링을 수행한다고 가정하십시오.

return (
 <div>
  {condition_a ? (
   <ComponentA />
  ) : condition_b ? (
   <ComponentB />
  ) : condition_c ? (
   <ComponentC />
  ) : (
   <ComponentD />
  )}
 </div>
); 

너무 지저분해 보이죠?
이런 경우 IIFE를 사용하면 switch-case 문장이나 매거 대상이 삼원 연산자보다 좋다.
3. & & 연산자의 조건 렌더링
모범 사례 개요

간단한 조건 렌더링을 사용해서 "else"블록의 코드를 실행할 필요가 없습니다.

삼원 연산자를 사용하면 if-else 문장의 코드량을 단축하고 JSX의 조건 렌더링에 더 좋은 선택을 제공할 수 있습니다.
그런데 삼원 연산자보다 더 간단한 방법이 있다는 것을 아십니까?
& & & 연산자는 이런if문장을 대체하는 데 사용할 수 있습니다.

// Instead of using ternary operator,
{
 isShow ? <SmallComponent /> : null;
}

// Use short-circuit && operator
{
 isShow && <SmallComponent />;
} 

삼원 연산자에서'else'조건이 없더라도'null'표현식을 써서 문법 오류를 피해야 한다.
& & & 연산자를 사용하면 여분의 코드를 쓸 필요가 없습니다.
단, & & 연산자를 if-else 문장으로 바꿀 수 없으며, if-else 문장은 말할 것도 없다는 것을 기억하십시오.
4. switch 포함 다중 조건 렌더링 - 사례
여러 조건을 렌더링하는 데 어느 위치에서나 사용할 수 있으며, 변수 하나만 조건을 판단할 수 있습니다.
if-else 문장과 같이 switch-case 문장도 거의 모든 프로그래밍 언어에서 흔히 볼 수 있는 기능이다.
이것은 같은 유형의 조건을 가진 여러 조건을 렌더링하는 데 사용됩니다.
예를 들어 우리는 switch-case 문장을 사용하여 사용자 역할에 따라 특정한 변수 값을 나타낼 수 있다.

let welcomeMessage;
switch (role) {
 case "superadmin":
  welcomeMessage = "Welcome Super Admin";
 // you can put other codes here as well.
 case "admin":
  welcomeMessage = "Welcome Admin";
 // you can put other codes here as well.
 case "user":
  welcomeMessage = "Welcome User";
 // you can put other codes here as well.
 default:
  welcomeMessage = "Welcome Guest";
 // you can put other codes here as well.
} 

JSX에서 switch-case 문구를 사용하여 조건 렌더링을 할 수도 있습니다.하지만 IIFE에 포장해야 합니다.
alert 상태 설정 스타일을 기반으로 하는alert 구성 요소를 보여준다고 가정하십시오.

return (
 <div>
  {(() => {
   switch (status) {
    case "warning":
     return <AlertComponent status="warning" message={messageState} />;
    case "error":
     return <AlertComponent status="error" message={messageState} />;
    case "success":
     return <AlertComponent status="success" message={messageState} />;
    default:
     return <AlertComponent status="info" message={messageState} />;
   }
  })()}
 </div>
); 

두 예시 모두 하나의 변수 (role와status) 만이 조건을 판단하는 것을 알 수 있을 것이다.이것이 바로 내가 전에 말한 같은 유형의 조건이다.
switch-case 문장은 복잡하고 다른 유형의 조건을 처리하는 데 사용할 수 없습니다.하지만 통용되는 if-else if-else 문장으로 그 장면을 처리할 수 있다.
5. 열거 객체의 다중 조건 렌더링
여러 조건이 있는 변수 값이나 반환 값을 할당할 때만 사용합니다.
열거 객체는 React에서 여러 조건 렌더링을 수행하는 데도 사용할 수 있습니다.JSX 태그의 switch-case 문장에 대해 더 좋은 선택입니다.
아시다시피 다섯 번째 방법에서는 switch-case 문장을 JSX의 IIFE에 포장해야 합니다.매거 대상을 사용하면 너는 이렇게 할 필요가 없다.
이전의 예시로 거리를 두자.상태를 바탕으로alert 구성 요소를 보여야 합니다.이것은 매거 대상을 이용하여 조건적으로 그것을 나타내는 방식이다.

const ALERT_STATUS = {
 warning: <AlertComponent status="warning" />,
 error: <AlertComponent status="error" />,
 success: <AlertComponent status="success" />,
 info: <AlertComponent status="info" />,
};

return <div>{ALERT_STATUS[status]}</div>; 

먼저 "ALERT_STATUS"라고 하는 열거 객체를 작성해야 합니다.그리고 JSX에서 [] 괄호 안의 상태 변수를 사용해서 호출합니다. 이 변수의 값은'warning','error','success'또는'info'입니다.
다른 아이템이나 속성을 전달해야 하는 경우 ALERT_STATUS가 이러한 함수로 변경되었습니다.

const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
});

return <div>{ALERT_STATUS(messageState)[status]}</div>; 

변수를alert 구성 요소에 전달할 수도 있습니다.

let newVariable = ALERT_STATUS(messageState)[status];

물론 매거 대상을 먼저 정의해야 한다.
열거 객체를 개별 파일로 분할하여 재사용
열거 객체를 사용하여 조건을 렌더링하는 데 가장 좋은 특성은 재사용할 수 있다는 것입니다.
예제 사례로 돌아가면 Alert 구성 요소는 React에서 일반적으로 재사용할 수 있는 구성 요소입니다.따라서 조건부 렌더링을 할 때도 다시 사용할 수 있다.
단독 파일에서 매거를 정의한 다음 내보낼 수 있습니다.

import React from "react";
import AlertComponent from "./path/to/AlertComponent";

export const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
}); 

그런 다음 어셈블리에서 사용할 때 가져옵니다.

import { ALERT_STATUS } from "./alertStatus";

용법은 이전과 같다.
6.HOC 기준 렌더링
Best Practice 요약
어셈블리를 렌더링하기 전에 특정 조건을 구현하거나 확인하려면 를 사용합니다.
고급 구성 요소(HOC)는 React에서 조건 렌더링을 수행하는 데 사용할 수 있습니다.일부 논리를 실행하거나 구성 요소를 렌더링하기 전에 검사할 때 사용할 수 있습니다.
예를 들어, 일부 구성 요소에 접근하기 전에 사용자가 인증을 통과했는지 확인하십시오.
인증이 필요한 모든 구성 요소에서 if-else 문장을 작성하는 것이 아니라 HOC를 사용하여 구성 요소를 보호할 수 있습니다.

// This is Higher Order Component
import React from "react";
export default function withAuthentication(Component) {
 // some code of authentication logic/service that result an isLoggedIn variable/state:
 let isLoggedIn = true;

 return function AuthenticatedComponent(props) {
  if (isLoggedIn) {
   return <Component {...props} />;
  } else {
   return <div class="alert alert-danger">You're not authenticated!</div>;
  }
 };
} 

그런 다음 어셈블리에서 가져올 수 있습니다.

import withAuthentication from "./withAuthentication";
const AuthenticatedUIComponent = withAuthentication(AnUIComponent);

return (
 <div>
  <AuthenticatedUIComponent />
 </div>
); 

이게 더 좋아요, 그래요?
HOC를 다른 재사용 가능한 조건 렌더링에 사용할 수 있습니다. 예를 들어 로드 표시기 구현, 빈 값 검사 등입니다.
HOC(기능 구성 요소 포함)에 대한 자세한 정보는mediumhttps://medium.com/@albertchu539/higher-order-components-in-a-react-hooks-world-69fe1f0b0791에서 확인할 수 있습니다.
7. 외부 라이브러리가 있는 JSX 기준 렌더링
Best Practice 요약

이 방법을 사용하지 마십시오.위의 6가지 방법을 익히세요:D

비록 나는 네가 이 방법을 사용하는 것을 건의하지 않지만, 나는 단지 너에게 JSX가 자신의 조건을 가지고 있는 렌더링 표시를 하는 babel 플러그인이 있다는 것을 알려주고 싶을 뿐이다.
JSX 제어 문구를 사용하면 이렇게 JSX에서 기준 렌더링을 작성할 수 있습니다.

<If condition={test}>
 <span>Truth</span>
</If>;

<Choose>
 <When condition={test1}>
  <span>IfBlock</span>
 </When>
 <When condition={test2}>
  <span>ElseIfBlock</span>
  <span>Another ElseIfBlock</span>
  <span>...</span>
 </When>
 <Otherwise>
  <span>ElseBlock</span>
 </Otherwise>
</Choose>; 

컴파일에서 이 탭들은 삼원 연산자로 변환됩니다.
일부 개발자는 이 플러그인을 사용합니다. 왜냐하면 JSX의 조건 렌더링이 더욱 가독성이 있어 보이기 때문입니다.
번역자 주: 당신은 간단한 IF 구성 요소를 실현하여 간단한 판단을 실현할 수 있습니다.

const If = (props) => {
 const condition = props.condition || false;
 const positive = props.then || null;
 const negative = props.else || null;

 return condition ? positive : negative;
}; 

<IF condition={isLoggedIn} then={<Hello />} else={<div> </div>} />

이것이 바로 React에서 조건 렌더링에 사용할 수 있는 7가지 방법입니다.
인코딩 즐거웠어요!
번역문 https://dev.to/syakirurahman/react-conditional-rendering-best-practices-with-7-different-methods-16e3#6_Conditional_Rendering_with_HOC
원작자 Syakir Rahman
파란 가을바람 (github/hua1995116)
이 React 조건 렌더링 최적 실천 소결 (7가지) 에 관한 글을 소개합니다. 더 많은 React 조건 렌더링 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!