조건부 렌더링

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리 케이션의 상태에 따라서 컴포넌트 중 몇 개만 렌더링 할수 있다.

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

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

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

조건부 렌더링을 한 컴포넌트 이며 결과는 Please sign up. 이 나온다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if(isLoggedIn) <UserGreeting />
   
  return <GuestGreeting />
}
  
ReactDOM.render(
 <Greeting isLoggedIn={false} />,  
  document.getElementById('root')
)

엘리먼트 변수

엘리먼트를 저장하기 위해 변수를 사용할수 있다. 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건부로 렌더링 할수 있다.

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

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

컴포넌트를 조건부로 다시 렌더링 한 예제이다.

class LoginControl extends React.Component {
 constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    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')
);

논리 && 연산자 if를 인라인으로 표현하기

중괄호를 이옹해 표현식을 포함 할 수 있다.

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

&& 뒤의 엘리먼트는 조건이 true일때 출력된다.

조건부 연산자로 if-else구문 인라인으로 표현하기

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

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

가독성이 떨어 질수 있지만 상황에 따라 조건이 복잡할때 컴포넌트를 분리할수 있다.

컴포넌트가 렌더링하는것을 막기

다른컴포넌트에 의해 렌더링 될때 컴포넌트 자체를 숨기고 싶을때 사용하는 방법은 렌더링 결과를 출력하는 대신 null을 반환하면 된다.

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

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

class Page extends React.Component {
  //...
}

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

컴포넌트의 render메서드로 부터 null을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않는다.

---

참고

해당 포스팅은 실전 리엑트 공식 홈페이지 https://ko.reactjs.org/
리엑트 자습서 https://ko.reactjs.org/docs/conditional-rendering.html 에서 참고하여 작성했습니다.