[React] 조건부 렌더링

1. 조건부 렌더링 개요

1.1 조건부 렌더링 개념

조건부 렌더링은 상태나 조건에 따라 특정 컴포넌트를 렌더링하는 것을 의미한다.

로그인창에서는 회원가입 버튼을 클릭하면 회원가입창으로, 회원가입창에서는 로그인 버튼을 누르면 로그인창으로 토글링 되도록 구현해보자.

2. 조건부 렌더링 구현

2.1 삼항연산자 사용

가장 간단하고 직관적인 방법 중 하나이다.

import React, { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  return <>{isLoggedIn ? "로그인" : "로그아웃"}</>;
}

export default App;

버튼 클릭시 상태를 바꿔보자

import React, { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  return (
    <>
      <button onClick={() => setIsLoggedIn((prev) => !prev)}>
        {isLoggedIn ? "로그인" : "로그아웃"}
      </button>
    </>
  );
}

export default App;

2.2 && 연산자 사용

조건이 참일 때만 컴포넌트를 렌더링한다.

import React, { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  return <>{isLoggedIn && <div>안녕</div>}</>;
}

export default App;

2.3 switch문 사용

조건이 두 개 이상일 때 유용한 방법이다.

import React from "react";

const App = () => {
  let content = "loading";

  switch (content) {
    case "loading":
      return <div>로딩중</div>;
    case "success":
      return <div>성공</div>;
    case "error":
      return <div>에러</div>;
    default:
      return <div>상태가 없습니다.</div>;
  }
};

export default App;

props로부터 status를 받아와 해당하는 컴포넌트를 렌더링 할 수 있다.

import React from "react";

const App = (props) => {
  const status = props.status;

  switch (status) {
    case "loading":
      return <Loading />;
    case "success":
      return <Success />;
    case "error":
      return <Error />;
    default:
      return null;
  }
};

export default App;

isLoggedIn 상태에 따라 다른 JSX를 반환하여 조건부 렌더링을 구현할 수 있다.

import { useState } from "react";

const AuthButton = (props) => {
  const [isLoggedIn, setIsLoggedIn] = useState(props.isLoggedIn);

  switch (isLoggedIn) {
    case true:
      return (
        <>
          <div>
            <button>Logout</button>
          </div>
        </>
      );
    case false:
      return (
        <>
          <div>
            <button>Login</button>
          </div>
        </>
      );
    default:
      return null;
  }
};

const App = () => {
  const isLoggedIn = true;
  return <AuthButton isLoggedIn={isLoggedIn} />;
};

export default App;