6 React 조건부 렌더링 완벽 정리: if문, 삼항 연산자, && 연산자 활용

 React에서 조건부 렌더링(Conditional Rendering)은 특정 조건에 따라 UI를 변경하는 중요한 개념입니다. 사용자가 로그인했을 때 다른 화면을 보여주거나, 데이터가 있을 때만 특정 컴포넌트를 렌더링하는 등 다양한 상황에서 활용됩니다.

이번 글에서는 if문, 삼항 연산자(ternary operator), && 연산자(logical AND)를 활용한 조건부 렌더링 방법을 초보자도 쉽게 이해할 수 있도록 설명드리겠습니다.

---

1. React에서 조건부 렌더링이란?

조건부 렌더링은 특정 조건을 만족할 때만 특정 요소를 화면에 표시하는 기법입니다. JavaScript의 if문, 삼항 연산자, && 연산자 등을 활용하여 구현할 수 있습니다.

주요 키워드: React 조건부 렌더링, if문 렌더링, 삼항 연산자, && 연산자, JSX 조건문

React에서 조건부 렌더링을 사용하는 대표적인 예제는 다음과 같습니다.

• 사용자가 로그인했을 때만 "로그아웃" 버튼을 표시
• 데이터가 없을 때 "데이터가 없습니다" 메시지 표시
• 특정 조건을 만족할 때 특정 컴포넌트만 렌더링

---

2. if 문을 활용한 조건부 렌더링

JavaScript에서 가장 기본적인 조건문인 if 문을 React에서도 활용할 수 있습니다.

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

export default function App() {
  return <Greeting isLoggedIn={true} />;
}

설명:

• isLoggedIn이 true면 "환영합니다!"를 출력하고, false면 "로그인해주세요."를 출력합니다.
• 일반적인 if 문을 사용하여 직관적으로 조건을 설정할 수 있습니다.

하지만 JSX 내부에서 if 문을 직접 사용할 수는 없습니다. JSX에서 조건문을 직접 사용하려면 다른 방법을 활용해야 합니다.

---

3. 삼항 연산자(? :)를 활용한 조건부 렌더링

삼항 연산자는 JSX 내부에서 사용할 수 있는 간결한 조건문입니다.

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

export default function App() {
  return <Greeting isLoggedIn={false} />;
}

설명:

• isLoggedIn 값에 따라 삼항 연산자(? :)를 이용해 h1 태그 내부의 텍스트를 동적으로 변경합니다.
• 삼항 연산자는 JSX 내부에서 사용할 수 있어 가독성이 좋고 코드가 짧아집니다.

---

4. && 연산자를 활용한 조건부 렌더링

&&(논리 AND) 연산자를 사용하면 조건이 참일 때만 특정 요소를 렌더링할 수 있습니다.

function Notification({ hasMessage }) {
  return (
    <div>
      <h1>알림 센터</h1>
      {hasMessage && <p>새로운 메시지가 있습니다! 📩</p>}
    </div>
  );
}

export default function App() {
  return <Notification hasMessage={true} />;
}

설명:

• hasMessage가 true일 때만 <p> 태그가 렌더링됩니다.
• false면 <p> 태그 자체가 생성되지 않습니다.
• && 연산자를 활용하면 if 문 없이 간결한 코드 작성이 가능합니다.

주의: && 연산자는 falsy한 값(false, null, undefined, 0, "")을 만나면 렌더링하지 않습니다.

 

---

5. 조건부 렌더링을 활용한 실전 예제

조건부 렌더링을 사용하면 로그인 상태에 따라 버튼을 다르게 표시할 수 있습니다.

로그인 상태에 따라 버튼 변경하기

function LoginButton({ isLoggedIn, onLogin, onLogout }) {
  return (
    <button onClick={isLoggedIn ? onLogout : onLogin}>
      {isLoggedIn ? '로그아웃' : '로그인'}
    </button>
  );
}

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);

  return (
    <div>
      <h1>{isLoggedIn ? '사용자님, 환영합니다!' : '로그인해주세요.'}</h1>
      <LoginButton 
        isLoggedIn={isLoggedIn} 
        onLogin={() => setIsLoggedIn(true)} 
        onLogout={() => setIsLoggedIn(false)} 
      />
    </div>
  );
}

설명:

• useState를 사용해 로그인 상태(isLoggedIn)를 관리합니다.
• 삼항 연산자로 버튼의 텍스트와 클릭 이벤트를 동적으로 변경합니다.
• 로그인 상태에 따라 "환영 메시지"와 "로그인/로그아웃 버튼"이 바뀝니다.

---

6. 조건부 렌더링 최적화 방법

React에서는 불필요한 렌더링을 최소화하는 것이 성능 최적화에 중요합니다.

6-1. null 반환을 활용하여 요소 숨기기

컴포넌트에서 특정 조건일 때 아무것도 렌더링하지 않으려면 null을 반환하면 됩니다.

function WarningMessage({ showWarning }) {
  if (!showWarning) {
    return null; // 아무것도 렌더링하지 않음
  }

  return <p> 경고: 잘못된 접근입니다.</p>;

}

6-2. lazy 로딩을 활용하여 무거운 컴포넌트 조건부 로딩

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App({ isLoaded }) {
  return (
    <div>
      {isLoaded && (
        <React.Suspense fallback={<p>로딩 중...</p>}>
          <HeavyComponent />
        </React.Suspense>
      )}
    </div>
  );
}

• React.lazy()를 활용하면 필요한 경우에만 해당 컴포넌트를 불러와 성능을 최적화할 수 있습니다.

---

7. 결론

React에서 조건부 렌더링은 UI를 동적으로 변경하는 핵심 기술입니다.
if문, 삼항 연산자, && 연산자 등을 적절히 활용하면 깔끔한 코드 작성과 성능 최적화가 가능합니다.

if문 → JSX 외부에서 조건을 검사할 때 사용
삼항 연산자 → JSX 내부에서 간단한 조건부 렌더링에 적합
&& 연산자 → 조건이 true일 때만 특정 요소를 렌더링할 때 사용
최적화 기법 → null 반환, lazy 로딩 활용

React 프로젝트에서 조건부 렌더링을 적극 활용하여 더욱 유연하고 최적화된 UI를 만들어보세요!