리액트 : 조건부 렌더링 if, &&, ||, 삼항연산자, switch 등

 

리액트의 조건부 렌더링은 특정 조건에 따라 컴포넌트를 렌더링하거나 렌더링하지 않는 방식이다.

리액트는 UI렌더링을 함수 호출처럼 처리하므로, 조건부 렌더링은 JavaScript의 조건문을 활용하여 구현한다.

단순한 조건에는 삼항 연산자나 &&, 복잡한 조건에는 if나 switch, 여러 조건이 겹칠 경우에는 컴포넌트 분리를 고려한다.

 

 

1. if문을 사용한 조건부 렌더링

가장 기본적인 방식으로 조건에 따라 반환할 컴포넌트를 명확히 구분 할 때 사용된다.

function Example({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

 

isLoggedIn 값이 있으면 Welcome back! 출력

값이 없으면 Please log in. 출력

조건에 따라 전혀 다른 JSX를 반환해야 할 경우 적합하다.

 

 

 

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

삼항 연산자는 간결하게 조건부 렌더링을 표현할 수 있다.

function Example({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

• 조건이 맞으면 :의 왼쪽이 조건이 틀리면 오른쪽이 실행됨
• 한줄로 표현이 가능해 코드가 간결하며 간단한 조건부 렌더링에 적합하다
• 조건이 복잡하거나 여러 조건이 중첩되면 가독성이 떨어질 수 있다.

 

 

3. 논리 연산자 &&를 사용한 조건부 렌더링

true && expression의 결과는 expression이고, false && expression은 false 이다.

이를 이용해 조건이 참일 경우에만 특정 컴포넌트를 렌더링할 수 있다.

function Example({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

 

조건에 따라 전혀 다른 jsx를 반환해야 할 때 적합하다.

 

 

4. || 연산자를 사용한 기본값 렌더링

|| 연산자는 조건이 거짓을 때 기본값을 설정하는 데 사용할 수 있다.

function Example({ username }) {
  return (
    <div>
      <h1>Welcome, {username || 'Guest'}!</h1>
    </div>
  );
}

 

값이 없거나 falsy(null, undefined, false 등)일 때 대체값을 렌더링 하는데 적합하다.

 

 

 

5. switch 문을 사용한 조건부 렌더링

여러 조건이 있을 때는 switch문을 사용할 수 있다.

function Example({ status }) {
  switch (status) {
    case 'loading':
      return <h1>Loading...</h1>;
    case 'error':
      return <h1>Error occurred!</h1>;
    case 'success':
      return <h1>Data loaded successfully!</h1>;
    default:
      return <h1>Unknown status</h1>;
  }
}

 

• 조건이 많을 경우 if-else 보다 깔끔하며 가독성이 높아진다.

 

 

6. 즉시 실행 함수 (IIFE)를 사용한 복잡한 조건부 렌더링

복잡한 조건이나 계산이 필요한 경우, IIFE를 사용할 수 있다.

function Example({ user }) {
  return (
    <div>
      {(() => {
        if (!user) return <h1>Please log in.</h1>;
        if (user.role === 'admin') return <h1>Welcome, Admin!</h1>;
        return <h1>Welcome, User!</h1>;
      })()}
    </div>
  );
}

 

• 조건이 복잡하거나 계산이 필요한 경우 적합
• 가독성이 떨어질 수 있으므로, 단순 조건에는 권장하지 않는다.

 

 

7. 조건부 클래스 렌더링

리액트에서 CSS클래스를 조건부로 적용하는 경우, className 라이브러리나 조건문을 활용할 수 있다.

function Example({ isActive }) {
  return (
    <div className={isActive ? 'active' : 'inactive'}>
      Status: {isActive ? 'Active' : 'Inactive'}
    </div>
  );
}

 

classNames 라이브러리 사용

import classNames from 'classnames';

function Example({ isActive }) {
  return (
    <div className={classNames({ active: isActive, inactive: !isActive })}>
      Status
    </div>
  );
}

 

---

 

주의사항

1. 컴포넌트의 반환 값은 하나의 JSX 노드여야 한다.

조건부 렌더링으로 여러 컴포넌트를 반환할 경우, 반드시 하나의 부모 태그로 감싸야 한다.

2. 코드 가독성

조건부 렌더링이 복잡해지면 컴포넌트를 분리하는 것이 더 나을 수 있다. 예를 들어, 조건에 따라 각기 다른 UI를 렌더링 하는 컴포넌트를 별도로만들면 관리하기 편리하다.

3. 불필요한 렌더링 방지

조건부 렌더링은 UI성능 최적화에 도움이 된다. 불필요한 컴포넌트를 렌더링하지 않아 메모리 사용을 줄일 수 있다.