리액트 조건부 렌더링

hyeon·2024년 11월 7일

[내일배움캠프] 정기 세션

목록 보기

2/7

1. 리액트 조건부 렌더링

React의 조건부 렌더링은 특정 조건에 따라 구성 요소나 요소를 선택적으로 표시하는 것입니다. 고객이 로그인한 경우에만 특별 제안을 표시하거나 데이터가 로드될 때 특정 콘텐츠만 표시하도록 결정하는 것과 같습니다. React를 사용하면 조건부 렌더링이 JSX 내에서 직접 JavaScript 조건을 사용하는 것만큼 간단해집니다.

React에서 조건부 렌더링을 관리하는 몇 가지 일반적인 방법은 다음과 같습니다.

1. JSX 외부에서 if 문 사용

좀 더 복잡한 조건을 기반으로 무언가를 렌더링하려는 경우 JSX 외부의 if 문을 사용하면 마크업을 깔끔하게 유지할 수 있습니다.

function WelcomeMessage({ isLoggedIn }) {
  let message;
  
  //로그인 여부에 따른 메시지
  if (isLoggedIn) {
    message = <h1>환영합니다!</h1>;
  } else {
    message = <h1>로그인 해주세요.</h1>;
  }
  
  return <div>{message}</div>;
}

isLoggedIn이 true인 경우, 사용자에게 “환영합니다!”가 표시됩니다. false인 경우, '로그인 해주세요.'라는 메시지가 표시됩니다.

2. 삼항 연산자를 사용한 인라인 조건부 렌더링

조건이 간단한 경우 삼항 연산자를 사용한 인라인 렌더링은 상황을 간결하게 유지합니다.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인 해주세요.</h1>}
    </div>
  );
}

이 코드는 if 문과 동일한 결과를 달성하지만 모두 한 줄에 포함됩니다. 간단한 참 또는 거짓 조건이 있을 때 삼항연산자는 좋은 선택지입니다.

3. && 연산자를 사용한 Short-Circuit Evaluation

조건이 true인 경우에만 무언가를 렌더링하려면 '&&'(AND)를 사용하여 조건이 false인 경우 렌더링을 건너뜁니다.

function Notification({ hasNotification }) {
  return (
    <div>
      {hasNotification && <p>You have new notifications!</p>}
    </div>
  );
}

여기서 <p> 요소는 hasNotification이 true인 경우에만 표시됩니다. 이 트릭은 "다른" 결과가 없고 "표시 또는 숨기기" 시나리오만 있는 경우에 유용합니다.

4. '&&' 연산자와 삼항 연산자를 결합

React에서 '&&' 연산자와 삼항 연산자를 함께 사용할 수 있습니다. 이는 여러 조건을 평가하고 해당 조건에 따라 표시되는 내용을 제어하려는 경우 유용할 수 있습니다.

예: 사용자 상태 및 알림

로그인한 사용자에게 환영 메시지를 표시하고 사용자가 아직 인증 중인 경우 로드 메시지를 표시하는 구성 요소가 있다고 가정해 보겠습니다.

function UserStatus({ isLoggedIn, isLoading }) {
  return (
    <div>
      {isLoading ? (
        <p>프로필 로딩 중...</p>
      ) : (
        isLoggedIn && <h1>Welcome back!</h1>
      )}
    </div>
  );
}

UserStatus 구성요소는 isLoggedIn 및 isLoading이라는 두 가지 props을 허용합니다.
삼항 연산자는 'isLoading'이 'true'인지 확인합니다. 그렇다면 "프로필 로딩 중..."이 렌더링됩니다.
isLoading이 false인 경우 && 연산자는 isLoggedIn이 true인지 확인합니다. 그렇다면 환영 메시지 "Welcome back!"을 렌더링합니다.
isLoggedIn이 false인 경우 로딩 메시지 후에 아무것도 렌더링되지 않습니다.

5. 조건부 렌더링의 잠재적인 함정

조건부 렌더링에 '&&' 연산자를 사용하면 예상치 못한 결과가 발생할 수 있으며, 특히 렌더링된 값이 ‘0’인 경우가 여기에 해당됩니다.

function Notification({ notifications }) {
  return (
    <div>
      {notifications.length && <p>You have {notifications.length} new notifications!</p>}
    </div>
  );
}

언뜻 보면 괜찮아 보일 수도 있습니다. 그러나 notifications.length가 0인 경우 false로 평가되고 React는 아무것도 아닌 대신 0을 렌더링합니다. 이는 우리가 의도한 일이 아닙니다!

해결책: 삼항 연산자를 사용하면 더 명확해질 수 있습니다.

function Notification({ notifications }) {
  return (
    <div>
      {notifications.length > 0 ? (
        <p>You have {notifications.length} new notifications!</p>
      ) : null}
    </div>
  );
}

null을 사용하면 notifications.length가 0인 경우 아무것도 표시되지 않습니다. '0'과 같은 원치 않는 값이 표시되는 것을 방지하는 추가 보호 장치입니다.

각 접근 방식을 사용해야 하는 경우

if 문: JSX의 여러 줄이 포함된 복잡한 논리
삼항 연산자: 간단한 참/거짓 조건
&& 연산자: 조건이 참인 경우에만 렌더링에 사용되며 거짓인 경우는 무시됩니다.
조합: 여러 조건을 처리하는 데 사용하여 렌더링 논리에 대한 세부적인 제어를 제공합니다.

새롭게 알게 된 것 & 어려웠던 부분

&&의 왼쪽에 숫자를 두지 마세요. ⇒ 공식문서에는 이렇게 되어있어서 0 제외하고 다른 숫자는 되는지 궁금했는데 직접 실행해봤는데 {3 &&<p>New messages</p>}
=> New messages가 잘 나온다. 0이 falsy한 값이니깐 0을 제외한 숫자는 모두 참으로 인식한다.