조건부 렌더링이란?

react에서 어떤 상태에 따라 렌더링되는 결과를 바꿔주고 싶을 때 조건부 렌더링을 이용할 수 있다. 조건부 렌더링이라는 말 그대로 조건에 따라 그 결과를 렌더링 해준다는 의미이다.
react에서 조건부 렌더링은 자바스크립트 조건처리와 똑같이 동작한다.

import React, { useState } from "react";

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

  const handleLogin = () => {
    setLogin(prevState => {
      return !prevState;
    });
  };
  return (
    <>
      <h2>로그인 상태</h2>
      <button onClick={handleLogin}>Logout</button>
    </>
  );
};

export default Loginpage;

위와 같은 컴포넌트에서 login 상태에 따라서 login , logout 버튼을 렌더링 한다고 가정하면

import React, { useState } from "react";

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

  const handleLogin = () => {
    setLogin(prevState => {
      return !prevState;
    });
  };
  return (
    <>
      <h2>{login ? "로그인 상태" : "로그아웃 상태"}</h2>
      <button onClick={handleLogin}>{login ? "Logout" : "Login"}</button>
    </>
  );
};

export default Loginpage;

조건부 렌더링을 통해 login의 상태에 따라서 렌더링을 해준다.
꼭 위의 삼항연산자를 통한 조건부 렌더링을 할 필요는 없다. 상황에 맞게 최적의 가독성을 따져가며 작업해주면 된다. 논리 연산자를 사용할 수도 있고 아니면 그냥 if문을 사용해도 상관없다.