Inline 컨디션 이해하기

InLine code

• 코드를 따로 작성하지 않고 조건문을 코드 안에 직접 작성하는 것을 의미한다.

Inline If

• 조건문을 코드 안에 집어 넣는 것을 의미한다.
• 이때 사용되는 것이 && 연산자이다.
• 양쪽에 나오는 조건문이 모두 true일 때만 true가 나온다.

• short circut evaluation이라는 개념이 나오는데 만약 앞쪽, 왼쪽의 조건문이 false라면 뒤의 조건문은 계산되지 않고 바로 false를 반환한다는 것이다.

• 인라인 조건문은 이 && 연산자를 {} 안에 작성하는 것을 의미한다. ㅈ

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

• 위 코드 조건문에서 0 조건이 false라면 아무것도 반환되지 않지만, true라면 h2태그가 반환될 것이다.
• 이를 통해 따로 반환 코드를 적을 필요가 없어 코드가 간결해진다.

주의점!

function Mailbox(props){
  const count = 0;

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

• 위 코드에서 0(false)일 경우 이전 코드와 달리 아무것도 반환하지 않는 것이 아니라 div> 0 /div>, div태그 안에 0이 감싸진 태그가 반환된다.

Inline If-else

• else문을 사용한다면 3항 연산자를 활용한다.

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

• 위와 같이 사용할 수 있다.

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

• 위 코드처럼 컴포넌트 element를 렌더링할 수도 있다.

컴포넌트 렌더링 막기

• 만약 조건에 따라 컴포넌트를 리턴하고 싶지 않다면 반환값이 null인 조건문을 작성하면 된다.

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

  -