React – JSX와 렌더링 – 컴포넌트 렌더링 – 4 – 조건부 렌더링 패턴 (null, &&, 삼항 등)

작성자 wooah
React – JSX와 렌더링 – 컴포넌트 렌더링 – 4 – 조건부 렌더링 패턴 (null, &&, 삼항 등)

React – JSX와 렌더링 – 컴포넌트 렌더링 – 4 – 조건부 렌더링 패턴 (null, &&, 삼항 등)

안녕하세요 여러분! 😊
이번 시간에는 React에서 아주 자주 사용되는 조건부 렌더링 패턴에 대해 알려드릴게요.
조건부 렌더링이란, 말 그대로 특정 조건에 따라 어떤 컴포넌트를 화면에 보여줄지 결정하는 것입니다.

JSX에서는 HTML처럼 단순히 보여주는 것뿐만 아니라, JavaScript 표현식을 이용해서 동적으로 화면을 조절할 수 있어요.
이를 통해 사용자 상태, 로그인 여부, 로딩 여부 등에 따라 UI를 유연하게 구성할 수 있답니다!

1. 조건부 렌더링이란?

특정 조건에 따라 컴포넌트를 보여주거나 숨기는 렌더링 방식입니다.

예를 들어 로그인한 유저에겐 프로필을 보여주고,
비로그인 유저에겐 로그인 버튼을 보여주는 식이죠!

{isLoggedIn ? <UserProfile /> : <LoginButton />}

2. null을 반환하는 패턴

React 컴포넌트에서 아무것도 렌더링하지 않으려면 null을 반환하면 돼요!

function WarningBanner({ show }) {
  if (!show) return null;

  return <div className="warning">⚠️ 경고 메시지!</div>;
}

📌 null은 “화면에 아무 것도 출력하지 않는다”는 의미예요.

3. && 연산자를 이용한 조건부 렌더링

조건이 true일 때만 컴포넌트를 보여주고 싶을 땐 && 연산자를 사용합니다.

function Message({ hasNewMessage }) {
  return (
    <div>
      <h3>받은 편지함</h3>
      {hasNewMessage && <p>📩 새로운 메시지가 있어요!</p>}
    </div>
  );
}
  • hasNewMessage가 true일 때만 <p>가 렌더링됩니다.
  • false, null, undefined, 0, '' 등 falsy한 값은 모두 무시돼요.

✅ 단순 조건일 때 깔끔한 코드가 되지만, false일 때 다른 UI를 보여주는 용도는 불가능하다는 점 주의하세요!

4. 삼항 연산자 ? :로 두 가지 경우 처리

조건에 따라 A 또는 B를 보여주고 싶을 때는 삼항 연산자를 사용해요.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>🎉 환영합니다!</p> : <p>🔐 로그인해주세요</p>}
    </div>
  );
}
  • 조건에 따라 서로 다른 컴포넌트를 렌더링할 수 있어요.
  • 중첩 사용도 가능하지만, 복잡해지면 가독성이 떨어지므로 피하는 것이 좋아요.

5. if 문을 사용할 수는 없나요?

JSX 내부에서는 if문을 쓸 수 없지만, JSX 외부에서는 얼마든지 사용할 수 있어요!

function Alert({ type }) {
  let content;
  if (type === 'success') {
    content = <p style={{ color: 'green' }}>성공했습니다!</p>;
  } else if (type === 'error') {
    content = <p style={{ color: 'red' }}>오류가 발생했습니다.</p>;
  } else {
    content = null;
  }

  return <div>{content}</div>;
}

☝️ 복잡한 조건은 JSX 바깥에서 처리하고, JSX 안에선 정리된 변수를 렌더링하는 방식이 좋아요!

6. 조건부 렌더링 패턴 비교

패턴 사용 예 설명
null 반환 if (!조건) return null 아무 것도 렌더링하지 않을 때
&& 연산자 {조건 && <컴포넌트 />} 조건이 참일 때만 렌더링
삼항 연산자 {조건 ? A : B} 조건에 따라 다른 컴포넌트 표시
외부 if문 let view; if(...) view = ... 복잡한 분기 로직을 외부에서 처리

7. 실전 예시: 로딩 상태 처리

function DataLoader({ isLoading, data }) {
  if (isLoading) {
    return <p>⏳ 로딩 중...</p>;
  }

  if (!data) {
    return <p>❌ 데이터를 불러오지 못했습니다.</p>;
  }

  return <p>📦 데이터: {data}</p>;
}

조건을 순차적으로 처리하며 상황에 맞는 화면을 보여주는 패턴이에요.

8. 조건부 스타일 적용도 가능해요

<p style={{ color: isError ? 'red' : 'black' }}>
  {isError ? '오류 발생' : '정상 작동'}
</p>

또는 className을 조건부로 적용할 수도 있어요:

<div className={isActive ? 'box active' : 'box'}>
  박스 컴포넌트
</div>

9. 중첩 삼항은 주의하세요 ⚠️

// ❌ 가독성 떨어지는 예
{isLoggedIn ? (isAdmin ? <Admin /> : <User />) : <Guest />}

➡️ 이런 경우는 조건문을 외부에서 미리 변수로 나눠서 처리하는 것이 좋아요.

10. 주의할 점 정리

항목 주의사항
if문은 JSX 안에서 사용 불가 JSX 밖에서 처리하거나 삼항 연산자 사용
&&는 false일 경우 아무 것도 안 나옴 true일 때만 렌더링함
중첩 삼항 연산자 지양 복잡하면 외부 변수 처리 권장
조건이 많다면 switch 또는 함수 분기 고려 로직이 길어지면 별도 분기 함수 작성도 좋음

마무리하며

React의 조건부 렌더링은 사용자 경험을 유연하게 만드는 핵심 기능이에요.
화면에 표시되는 컴포넌트를 상황에 따라 바꾸고, 조건에 맞는 UI를 동적으로 제어할 수 있게 해줍니다.

💡 핵심은 복잡한 로직은 밖에서 정리하고, JSX 내부는 최대한 깔끔하게!

다음 시간에는 컴포넌트를 렌더링할 때 필요한 React의 key 속성, 리스트 렌더링 최적화에 대해 배워볼게요.
조금 더 실전적으로 다뤄보는 시간도 기대해주세요! 🚀✨

답글 남기기