React.js 기본 사용법(5) - 조건부 렌더링

이번 포스트에서는 조건부 렌더링에 대해 알아본다.

 

React는 컴포넌트들의 구성으로 이루어졌다고 이전 포스트에서 다룬 적이 있다.

이 때, 어플리케이션의 상태에 따라서 컴포넌트를 렌더링할 수 있다.

 

아래와 같이 로그인 여부에 따라 화면 메세지가 달라지는 코드를 state만을 이용해 정말 간단하게 만들어본다.

import React, { useState } from "react";

const UserSignIn = () => {
  return <h1>Welcome!</h1>;
};

const UserSignOut = () => {
  return <h1>Please SignIn.</h1>;
};

const App = () => {
  const [login, setLogin] = useState(false);

  return (
    <div>
      {login ? <UserSignIn /> : <UserSignOut />}
      <div>
        <button onClick={() => setLogin(true)}>로그인</button>
        <button onClick={() => setLogin(false)}>로그아웃</button>
      </div>
    </div>
  );
};

export default App;

UserSignIn과 UserSignOut 이라는 두 컴포넌트가 있다.

이 두 컴포넌트는 로그인, 로그아웃 버튼에 따라 변경되는 login state의 boolean값에 따라 렌더링된다.

 

기본값이면서 로그아웃 버튼을 눌러 false가 되면 UserSignOut 컴포넌트가 출력되고,

로그인 버튼을 눌러 true가 되면 UserSingIn 컴포넌트가 출력되는 것을 확인할 수 있다.

이를 활용하면, 정말 다양한 기능 및 페이지 구현이 가능해진다.

 

---

 

다음 포스트에서는 리스트와 key에 대해 알아본다.