[React] 조건부 렌더링의 개념 및 구현

Conditional Rendering

• Condition : 조건 
  ✅ Conditional Rendering : 조건에 따른 렌더링, 조건부 렌더링
• 어떠한 조건(조건문)에 따라서 렌더링이 달라지는 것을 의미한다.

function UserGreeting(props) {
  return <h1>다시 오셨군요!</h1>;

}

function GuestGreeting(props) {
  return <h1>회원가입을 해주세요.</h1>
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;

  if(isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />
}

JavaScript의 Truthy/Falsy

Boolean → True / False 리턴

• Truthy : true는 아니지만 true로 여겨지는 값
• Falsy : false는 아니지만 false로 여겨지는 값

true
{} (empty object)
[] (empty array)
43 (number, not zero)
"0", "flase" (string, not empty)


false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null 
undefined
NaN (not a number)

Element Variables

• Element Variables : 엘리먼트 변수, 엘리먼트를 변수처럼 다루는 방법
• 렌더링 해야 할 컴포넌트를 변수처럼 다루고 싶을 때 사용한다.

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      로그인
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      로그아웃
    </button>
  )
}

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true)
  }

  const handleLogoutClick = () => {
    setIsLoggedIn(false)
  }

  let button;
  if(isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick}/>
  } else {
    button = <LoginButton onClick={handleLoginClick}/>
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn}/>
      {button}
    </div>
  )
}

 

Inline Conditions

• In+line : 라인 안에 넣다
• 코드를 별도로  분리된 곳에 작성하지 않고, 해당 코드가 필요한 곳 안에 직접 집어넣는 것.
  ✅ 조건문을 코드 안에 집어넣는 것.
  

Inline If

If 문의 경우, && 연산자를 사용한다.

 

💡 단축 평가

true && express => express : 조건문이 true이면, express가 평가(반환)된다. 
false && express => false  : 조건문이 false이면, express가 평가되지 않고, false가 반환된다. 

 

Inline If-Else

Inline If는 보여주거나 안 보여주거나 2가지 경우만 있는 반면,

Inline If-Else는 조건문의 값에 따라서 다른 엘리먼트를 보여줄 수 있다.

 

✅ 삼항연산자 사용 

condition? true : false

function Mailbox(props) {
  const unreadMessage = props.unreadMessages;

  return (
    <div>
      <h1>안녕하세요!</h1>
      {unreadMessage.length > 0 &&
        <h2>
          현재 {unreadMessage.length}개의 읽지 않은 메시지가 있습니다.
        </h2>
      }
    </div>
  )
}

function UserStatus(props) {
  return (
    <div>
      이 사용자는 현재 <b>{props.isLoggedIn? "로그인" : "로그인하지 않은"}</b> 상태입니다.
    </div>
  )
}

function LoginControl (props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }

  return (
    <div>
        <Greeting isLoggedIn={isLoggedIn}/>
        {isLoggedIn 
          ? <LogoutButton onClick={handleLogoutClick} />
          : <LoginButton onClick={handleLoginClick} />
        }
    </div>
  )
}

Component 렌더링 막기

null을 리턴하면 렌더링 되지 않는다.

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

  return (
    <div>경고!</div>
  )
}

function MainPage(props) {
  const [showWarning, setShowWarning] = useState(false);

  const handleToggleClick = () => {
    setShowWarning((prevShowWarning) => !prevShowWarning);
  }

  return(
    <div>
        <WarningBanner warning={showWarning}/>
        <button onClick={handleToggleClick}>
          {showWarning ? "감추기" : "보이기"}
        </button>
    </div>
  )
}

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션9. Conditional Rendering

 

➰ 더 공부할 것

• 단축 평가에 대한 개념 정리하기