[React] 조건부 렌더링

조건부렌더링 이란?

• 경험상 주로 내가 조건부 렌더링을 사용했던 부분은...
  1. 로그인/로그아웃 여부에 따라 nav 를 다르게 보여주어야 할 때
  2. 유저의 관리자/사용자등 권한이 다른경우 다른 콘텐츠를 보여주어야 할때
  
• vue.js 에서도 v-if 와 v-else 를 사용하였는데, 어떻게 다른지 파악하면서 학습하였습니다.

조건부 렌더링 코드 예시

로그인 여부에 따라서 각각 다른 화면을 리턴하는 컴포넌트

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />; // <div> welcome !!! </div> 
  }
  return <GuestGreeting />; // <div> please login !!! </div> 
}

전체적인 로그인 클래스 컴포넌트.
로그인이 되어있다면 -> welcomback 보여주기 -> 로그아웃 버튼이 보이게
로그아웃이 되어있다면 -> please login 보여주기 -> 로그인 버튼 보이게

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};
  }

 // 질문 1.
 // 여기서 두개 로그인, 로그아웃 함수를 따로 만들지 않고
 // this.setState({isLoggedIn : !isLoggedIn) 하나로 하면 문제가 생길까요?
  
  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

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

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    // 질문 2.
    // const로 state를 다시 선언한 이유는 무엇인가요?
    // 바로 if(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')
);

동작과정
1. DOM render에서 LoginControl이 렌더링
2. 생성자에서 함수들이 바인딩되고, 현재 state인 isLoggedIn 이 false 로 초기화
3. 만약 isLoggedIn이 true면 Logout 버튼을 보여주고, 로그아웃 처리
4. 반대로 isLoggedOut이 true면 Login 버튼을 보여주고 로그인 처리

&& 연산자로 If를 인라인으로 표현하기

자바스크립트에서 && 뒤의 엘리먼트는 조건이 true일때만 출력이 되므로 아래와 같이 응용할 수 있다.

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

false 라면 뒤에 있는 부분은 그대로 넘어간다.

null을 리턴하여 숨기기

특정 조건에서 컴포넌트 자체를 숨기고 싶을 때, 렌더링 결과를 출력하는 대신 null을 반환하면 표시되지 않는다.

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

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

새롭게 알게된 사실이다.
난 조건부 렌더링을 할때 아예 표시되지 않게 하려면, 조건에 맞춰서 css 에서 display: none; 을 주었다.
retrun null; 방법이 있다는것을 알게되어 사용하기에 더 편할 것 같다.