리액트 React | 조건부 렌더링(Conditional Rendering)

 

✅ 조건부 렌더링(Conditional Rendering)

React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다.

 

💡 사용자 로그인 상태에 따른 조건부 렌더링

사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다.

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

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

---

사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 렌더링 하는 Greeting 컴포넌트입니다. isLoggedIn이라는 prop에 따라 다른 컴포넌트를 렌더링 합니다. 렌더링 합니다. isLoggedIn 값이 true이면 UserGreeting 컴포넌트를, false이면 GuestGreeting 컴포넌트를 렌더링 합니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

 

💡 엘리먼트 변수를 사용한 조건부 렌더링

React에서는 엘리먼트를 변수에 저장하여 조건에 따라 렌더링 할 수도 있습니다. 조건부에 따라 출력되는 부분만 조건부로 렌더링 할 수 있습니다. 

---

로그인과 로그아웃 버튼을 나타내는 두 개의 컴포넌트가 있습니다.

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

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

---

로그인 상태에 따라 다른 버튼을 렌더링 하는 LoginControl 컴포넌트입니다. LoginControl 컴포넌트는 isLoggedIn 상태에 따라 다른 버튼을 렌더링 합니다. isLoggedIn 값이 true이면 LogoutButton 컴포넌트를, false이면 LoginButton 컴포넌트를 렌더링 합니다. 이를 통해 사용자의 로그인 상태에 따라 다른 UI를 보여줄 수 있습니다.

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }

  handleLoginClick = () => {
    this.setState({ isLoggedIn: true });
  };

  handleLogoutClick = () => {
    this.setState({ isLoggedIn: false });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

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

ReactDOM.render(<LoginControl />, document.getElementById('root'));

 

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

React에서는 JSX 안에 중괄호를 사용하여 표현식을 포함할 수 있습니다. 논리 && 연산자를 사용하면 조건에 따라 엘리먼트를 조건부로 넣을 수 있습니다.

---

Mailbox 컴포넌트는 unreadMessages prop에 따라 읽지 않은 메시지의 수를 보여줍니다. unreadMessages 배열의 길이가 0보다 큰 경우에만 메시지를 렌더링 합니다. 이를 통해 조건이 참일 때에만 엘리먼트를 렌더링 할 수 있습니다.

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

const messages = ['React', 'Re: React', 'Re:Re: React'];

ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

 

💡 삼항 연산자를 사용한 조건부 렌더링

조건부 렌더링을 위해 삼항 연산자인 condition? true : false를 사용할 수도 있습니다. 조건에 따라 다른 컴포넌트를 렌더링 할 수 있습니다.

---

사용자의 로그인 상태에 따라 다른 문구를 보여줍니다. isLoggedIn 값이 true이면 currently를, false이면 not을 렌더링 합니다. 조건부 연산자를 사용하여 간단하게 조건에 따른 표현식을 출력할 수 있습니다.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

 

💡 컴포넌트 렌더링을 막기

다른 컴포넌트에 의해 렌더링 될 때 자체 컴포넌트를 숨기고 싶을 수 있습니다. 이때는 렌더링 결과로 null을 반환하여 숨길 수 있습니다. 이를 통해 컴포넌트의 렌더링을 막을 수 있습니다.

---

WarningBanner 컴포넌트를 warn prop 값에 따라 렌더링 합니다. warn 값이 false이면 컴포넌트를 렌더링 하지 않습니다. 컴포넌트의 render 메서드에서 null을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않습니다. Page 컴포넌트는 showWarning 상태에 따라 WarningBanner 컴포넌트를 렌더링 합니다. showWarning 값이 true이면 컴포넌트를 렌더링 하고, false이면 숨깁니다. 이를 통해 필요한 상황에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다.

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showWarning: true };
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.getElementById('root'));