조건부 렌더링

✔ React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.
✔ if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용.

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

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

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

위에 나오는 Greeting 컴포넌트는 isLoggedIn이라는 변수의 값이 true에 해당되는 값(Truthy)이면 UserGreeting 컴포넌트를 리턴하고, 그렇지 않으면(Falsy) GuestGreeting 컴포넌트를 리턴한다. 이처럼 조건에 따라 렌더링의 결과가 달라지도록 하는 것을 조건부 렌더링이라고 한다.

엘리먼트 변수

✔ 컴포넌트를 변수처럼 다룬다.

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

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>Logout</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>
  );
}

위 코드에선 isLoggedIn 값에 따라 button이라는 변수에 컴포넌트를 대입하는 것을 볼 수 있다. 그리고 이렇게 컴포넌트가 대입된 변수를 return에 넣어 실제로 컴포넌트가 렌더링이 되도록 만들고 있다. 이처럼 엘리먼트를 변수처럼 저장해서 사용하는 방법을 엘리먼트 변수라고 한다.

변수를 선언하고 if를 사용해서 조건부로 렌더링 하는 것은 좋은 방법이지만 더 짧은 구문을 사용할 수도 있다.

인라인 조건

AND 연산

true && expression -> expression
false && expression -> false

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

JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다.

falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의해야 한다. 아래 코드의 결과는 화면에 아무것도 안 나오는 것이 아니라 count의 값인 0이 들어가서 "0" 이 출력된다.

function Counter(props) {
  const count = 0;
  return (
    <div>
      {count && <h1>카운트: {count}</h1>}
    </div>
  );
}

삼항 연산자

condition ? true : false

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>
  );
}

null로 컴포넌트 렌더링 막기

컴포넌트 자체를 숨기고 싶을 때가 있다. 이때는 렌더링 결과를 출력하는 대신 null을 반환한다.
아래의 예시에서는 WarningBanner가 props.warn의 값에 의해서 렌더링된다. warn이 false라면 컴포넌트는 렌더링 되지 않는다.

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

  return (
    <div className="warning">경고!</div>
  );
}

function Page(props) {
  const [showWarning, setShowWarning] = useState(false);
  
  const handleToggleClick = () => {
  	setShowWarning(pervShowWarning => !prevShowWarning);
  }
  
  return (
  	<div>
      <WarningBanner warning={showWarning} />
      <button onClick={handleToggleClick}>
      	{showWarning ? "감추기" : "보이기"}
      </button>
    </div>
  )
}

참고 https://ko.reactjs.org/docs/conditional-rendering.html