React 조건부 렌더링이란?

JangGwon·2023년 1월 4일

리액트

조건부 렌더링이란?

리엑트 공식문서에 따르면 'React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다.'라고한다
즉 특정 부분들을 if나 조건 연산자를 사용해 특정 조건에 따라 렌더링 시키는것

리액트에서는 조건부 렌더링을 하는 방법이 대표적으로 3가지가 방법으로는 아래와 같다.

엘리먼트 변수를 사용하는 방식
if/else나 switch 조건문 사용하는 방식
&& 연산자 또는 삼항 연산자를 사용하는 방식

엘리먼트 변수를 사용하는 방식

엘리먼트 변수란?
JSX Element를 가지고 있는 변수이다

엘리먼트 변수를 사용하여 조건에 따라서 특정 변수가 JSX의 값을 할당받는 방식으로 조건부 렌더링이 가능하다

예시

export default function Home() {
  const [isOnline, setIsOnline] = useState(true);
  let btn = null;

  function onlineClick() {
    setIsOnline(false);
  }

  function offlineClick() {
    setIsOnline(true);
  }

  if (isOnline)
    btn = <button onClick={onlineClick}>온라인</button>
  else
    btn = <button onClick={offlineClick}>오프라인</button>
  return (
    <div>
      {btn}
    </div>
  );

if else를 사용한 방식

function Auth() {
  const isLoggedIn = true;
  const loginbutton = () => {
    if (isLoggedIn) {
      return <button>Logout</button>;
    } else {
      return <button>Login</button>;
    }
  }
  return (
    <div>
      {loginbutton()}
    </div>
  );
}

또는

const Loginbutton = (props) => {
  if (props.isOnline) {
    return <button>Online</button>;
  } else {
    return <button>Offline</button>;
  }
}

export default function Home() {
  const isOnline = true;
  return (
    <div>
      <Loginbutton isOnline={isOnline} />
    </div>
  );
}

논리 && 연산자로 사용하는 방식

&& 연산자는 앞 조건이 참일 때, 실행되는 방식으로 조건에 대해서 참이나 거짓에 대해서 하나의 컴포넌트를 구성하여 렌더링하고 싶을 때 유용하게 쓸 수 있는 방법이다.
주의해야할 점으로는 && 연산자를 사용할 때 앞의 조건이 falsy 한 값이면 표현식이 반환된다는 점을 유의 해야한다. 참고로 0도 false가 아니라 falsy 한값이라는점

예시


function Home() {
  const age = 20;
  return (
    <div>
      <h1>Hello!</h1>
      { age > 19 &&
        <h2>
    	   You are adult
        </h2>
      }
    </div>
  );
}

삼항 연산자로 사용하는 방식

삼항 연산자란?

삼항연산자는 JavaScript에서 세 개의 피연산자를 받는 연산자로, (조건문) ? 참인 경우 : 거짓인 경우 방식으로 사용한다.

예시

function Home() {
  const online = true;
  return (
    <div>
      <h1>Hello!</h1>
      { online 
        ? <h2> Online </h2>
     	: <h2> Offline </h2>
      }
    </div>
  );
}

다중 삼항연산자도 가능

export default function Home() {
  const online = false;
  const onlogin = true;
  return (
    <div>
      <h1>Hello!</h1>
      {online
        ?
        onlogin
          ? <h2> Login & online </h2>
          : <h2> online & logout </h2>
        : <h2> Offline </h2>
      }
    </div>
  );
}