[React] 조건부 렌더링

조건부 렌더링

특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것을 의미함

예시

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.

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

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

사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만든다.

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

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

isLoggedIn prop에 따라서 다른 인사말을 렌더링 한다.

&& (앤드 연산자)로 조건부 렌더링

🔔 어떤 값을 단순히 숨기고 보여주고 하려할때는 && 연산자가 유리하다.

JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있다.
그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을수 있다.

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')
);

💯 💯 💯
JavaScript에서 true && expression은 항상 expression으로 평가되고
false && expression은 항상 false로 평가된다.

따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 된다.
조건이 false라면 무시한다.

삼항 연산자로 조건부 렌더링

🔔 조건에 따라 값을 다르게 나타내줘야 할때는 삼항연산자가 유리하다.

엘리먼트를 조건부로 렌더링하는 다른 방법은 삼항연산자인 condition ? true: false를 사용하는 것이다.

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

위 예시는 isLoggedIn 값이 true면 'The user is currently logged in.' 를 리턴하고,
false면 'The user is not logged in.' 을 리턴하게 된다.