조건부 렌더링

조건부 렌더링

---

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

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />, 
//<Greeting> 엘리먼트를 만나면 Greeting 컴포넌트에 props = { isLoggedIn: false }를 넘긴다.
  document.getElementById('root')
);

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

• JS에서 true && expression => expression
• JS에서 false && expression => false
• 단, false인 경우 false로 평가되는 표현식이 반환된다는 것 주의!

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  // ['React', 'Re: React', 'Re:Re: React'];
  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} />, 
  //{unreadMessages: ['React', 'Re: React', 'Re:Re: React']};
  document.getElementById('root')
);

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

• condition ? true: false 사용

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

조건부 렌더링 Q&A

---

• 다음 코드는 왜 잘못되었을까요? 어떻게 바르게 고칠 수 있을까요?

const tweet = <Tweet writer="김코딩">
  {
    if (nowLearning) {
      return '리액트'
    } else {
      return '배틀그라운드'
    }
  }는 늘 짜릿하네요
</Tweet>

function React(props) {
  return <div>리액트</div>
}
function Battle(props) {
  return <div>배틀그라운드</div>
}
function Tweet(props) {
  const user = props.writer;//김코딩
  return (
    <div>{user}: {nowLearning ? <Battle /> : <Tweet />}는 늘 짜릿하네요</div>
  )
  
}