조건부 랜더링

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

프로젝트를 시작하기에 앞서서 Element를 만드는 와중에 {label && <Text margin="5px">{label}</Text>} 이런 코드를 보게 되었다.
label 뭐.. Text를 뽑는데.. input을 labeling하는 건데... 뭐?

&&연산자를 알아보기로 한다.

isLogin의 결과에 따라 다른 컴포넌트를 각각 보여주는 코드를 짠다고 가정하자. 아래 두 컴포넌트가 있다.

function UserGreeting(props) {
  return <h1>${user.username}님 안녕하세요</h1>;
}

function GuestGreeting(props) {
  return <h1>반갑습니다. 회원가입을 해주세요!</h1>;
}

이런 경우 우리는 보통 if문으로 리턴값을 두가지 보여주게 된다.

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

하지만 여기서 간단히 논리연산자 &&을 사용하여 if를 in-line으로 표현하면 element를 조건부로 넣을 수 있다. JSX에서는 {}중괄호로 표현식을 포함할 수 있다.
JavaScript에서 true && expression은 뒤의 expression이 실행되고 false && expression은 항상 false로 나타난다.
따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 된다. 조건이 false라면 React는 무시하고 넘어가게 된다.

{isLogin && <UserGreeting /> }

을 사용하면 isLogin일 때 < UserGreeting />을 출력할 수 있게 된다.
그러면 아래 else { return < GuestGreeting /> }은?

조건부 연산자로 If-Else구문 인라인으로 표현하기

다른 방법으로 조건부 랜더링을 하는 법은 조건부 연산자인 condition ? true: false를 사용하는 방법이 있다.

return (
    <div>
      { isLogin ? <UserGreeting /> : <GuestGreeting /> }
    </div>
  );

으로 표현하면 아까 표현하고 싶었던 if문이 인라인으로 나타낼 수있다.

Element 만들기

이제 원래 만들려고 했던 input의 label을 if문을 사용하지 않고 인라인으로 만들어 보자.

 {label && <Text margin="5px">{label}</Text>}

label이 있으면 <Text margin="5px">{label} </Text>의 내용을 출력하게 된다.

컴포넌트 안에서는 If문을 사용할 수 없으니 삼항연산자나 &&를 사용하여 조건문을 작성하는 연습을 하여야 겠다.

참조