[React] Inflearn 처음 만난 리엑트(React) - 조건부 렌더링

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React.js

 

 

강의

(Inflearn) 처음 만난 리엑트(React) - SOAPLE님

 

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

[무료] 처음 만난 리액트(React) - 인프런 | 강의

 

 

9강. Conditional Rendering

Conditional Rendering

조건부 렌더링, 어떠한 조건에 따라서 렌더링이 달라지는 것

 

예시

회원인 경우 UserGreeting Component를 보여주고 비회원인 경우 GuestGreeting Component를 보여준다.

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


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


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

 

 

JavaScript의 Truthy와 Falsy

Truthy

true는 아니지만 true로 여겨지는 값

true, {} (Empty Object), [] (Empty Array), 42 (number, not zero), "0", "false" (String, not empty)

 

falsy

false는 아니지만 false로 여겨지는 값

false, 0, -0 (zero, minus zero), 0n (BigInt zero), '', "", `` (Empty String), null, undefined, NaN

 

 

Inline Conditions

코드를 별도로 분리된 곳에 작성하지 않고 필요한 코드 안에 직접 작성하는 방법, 조건문을 코드 안에 집어넣는 것

 

 

Inline If

• if 조건문을 필요한 곳에 직접 넣어 사용하는 것, if를 사용하지 않고 '&&' 연산자를 사용해서 작성한다.
• 조건문이 true이면 오른쪽에 오는 Element가 결과값이 되고, false이면 false가 결과값이 된다.

 

예시

const unreadMessage = props.unreadMessage;

return (
   {unreadMessage.length > 0 && 
   <h1>현재 {unreadMessage.length}개의 읽지 않은 메세지가 있습니다.</h1>}
);

 

* '&&' 연산자를 사용할 때 조건문에 false expression을 사용하면

 

뒤에 나오는 expression은 실행되지않지만 false exprssion의 값이 return돼서 출력되게 된다.

 

const count = 0;

return (
   <div>
      {count && <h1>현재 카운트 : {count}</h1>}
   </div>
);


출력 결과 <div>0</div>

 

 

Inline If-Else

• 조건문의 값에 따라서 다른 Element를 보여줄때 사용하고 '?' 연산자(삼항 연산자)를 사용한다.
• 조건이 true이면 첫 번째 항목을 return하고 false이면 두 번째 항목을 return해준다.

 

예시

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

 

* 특정 Component를 렌더링하고 싶지 않으면 null을 return해주면 된다.

 

Warning Component
function WarningBanner(props) {
   if(!props.warning) {
      return null;
   }
   return (
      <div>경고!</div>
   );
}


부모 Component
return (
   <div>
      <WarningBanner warning={showWarning}/>
   </div>
);