React 조건부 렌더링: 설명과 예제

 

React에서 조건부 렌더링은 특정 조건에 따라 서로 다른 컴포넌트를 렌더링하는 방법이다.
JavaScript의 조건문을 사용하여 구현할 수 있으며, React의 선언적인 특성을 활용하여 UI의 다양한 부분을 효과적으로 표시하거나 숨길 수 있다.

 

if문과 if-else문 :
가장 기본적인 형태로, 컴포넌트의 render 메서드 또는 함수형 컴포넌트 내에서 if 문을 사용하여 조건에 따라 다른 컴포넌트를 반환한다.

function Welcome(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

 

논리 && 연산자 사용:
React에선 {} 안에 JavaScript 표현식을 넣을 수 있다. && 연산자를 사용하여 조건부 렌더링을 적용할 수 있다.
이 방법은 조건이 true 일 때만 특정 컴포넌트를 렌더링하고자 할 때 유용하다.

function Mailbox(props) {
  return (
    <div>
      <h1>Hello!</h1>
      {props.unreadMessages.length > 0 &&
        <h2>
          You have {props.unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

 

조건부 연산자 사용: 조건부 연산자 (condition ? true : false)를 사용하여 더 복잡한 조건부 렌더링을 구현할 수 있다. 두 가지 이상의 뷰 중 하나를 렌더링해야 할 때 유용하다.

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
      {isLoggedIn ? <LogoutButton onClick={props.onLogoutClick} /> : <LoginButton onClick={props.onLoginClick} />}
    </div>
  );
}

 

사용자가 로그인한 경우(isLoggedIn 이 true 인 경우), UserGreeting 컴포넌트와 로그아웃 버튼인 LogoutButton 컴포넌트를 렌더링한다. props.onLogoutClick 함수를 LogoutButton 컴포넌트의 onclick 속성으로 전달하여 로그아웃 버튼 클릭 시 로그아웃 작업을 수행한다.

 

요소 변수 사용: 컴포넌트의 상태에 따라 렌더링할 요소를 변수에 할당하고 이 변수를 JSX 내에서 사용할 수 있다.

function LoginControl(props) {
  let button;
  if (props.isLoggedIn) {
    button = <LogoutButton onClick={props.onLogoutClick} />;
  } else {
    button = <LoginButton onClick={props.onLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={props.isLoggedIn} />
      {button}
    </div>
  );
}

 

false, null, undefined, true 는 렌더링되지 않으므로 조건문에서 이들을 반환하는 경우 해당 부분은 렌더링되지 않는다.

 

---

24년 1월 7일 작성된 글입니다