9장 조건부 렌더링

1.조건부 렌더링

• 조건에 따라 렌더링의 결과가 달라지도록 하는것

💡아래 예시는 isLoggedIn prop에 따라서 다른 인사말을 렌더링

//UserGreeting / GuestGreeting 두개의 컴포넌트 생성
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

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

//로그인 상태에 맞게 위 컴포넌트 중 하나를 보여줌
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

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

🔖codepen에서 실행하기

2. 엘리번트 변수

• 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법

3. 인라인 조건

• 조건문을 코드 안에 집어넣는것

• 인라인 if
  : if문을 필요한 곳에 직접 집어넣어서 사용하는 방법
  : 논리 연산자 &&를 사용(AND 연산)
  : 앞에 나오는 조건문이 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>
  );
}

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

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

• 인라인 if-Else
  : if-Eles문을 필요한 곳에 직접 넣어서 사용하는 방법
  : 삼항 연산자 ?를 사용
  : 앞에 나오는 조건문이 true면 첫 번째 항묵을 리턴, false면 두번째 항목을 리턴
  : 조건에 따라 각기 다른 엘리먼트를 렌더링 하고 싶을때 사용

조건문 ? 참일 경우 : 거짓일 경우

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

4. 컴포넌트 렌더링 막기

• 리액트에서는 unll을 리턴하면 렌더링되지 않음
• 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨