[React] 조건부 렌더링

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.조건부 렌더링

특정 조건에 따라 컴포넌트나 요소를 렌더링하는 것입니다.
조건문을 사용하여 사용할수있습니다.

 

import React from 'react';

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

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

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

function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

export default App;

 

 

2.삼항 연산자 사용

import React from 'react';

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

export default App;

 

 

3. && 연산자 사용

&& 연산자를 사용하여 조건이 참일 때만 특정 컴포넌트를 렌더링할 수 있습니다.

import React from 'react';

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

function App() {
  return (
    <div>
      <Mailbox unreadMessages={['Message 1', 'Message 2']} />
      <Mailbox unreadMessages={[]} />
    </div>
  );
}

export default App;