[React] 조건부 렌더링

 

 

React에서의 조건부 렌더링이란?

조건부 렌더링은 어떤 조건에 따라 다른 컴포넌트나 요소를 렌더링하는 것을 의미한다. 

 

 

React 에서의 조건부 렌더링은 보통 삼항연사자를 이용해서 구현된다. 아래의 예제를 보자

import React from 'react';

function App ({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

export default App;

isLoggedIn이 true이면 "Welcome, user!"가 출력되고, false이면 "Please log in"이 출력되는 간단한 예제이다.

 

여러 조건이 필요한 경우는 아래처럼 &&을 이용하여 나타낼수도 있다.

import React from 'react';

function App({ isLoggedIn, isAdmin }) {
  return (
    <div>
      {isLoggedIn && isAdmin ? (
        <p>Welcome, admin user!</p>
      ) : isLoggedIn ? (
        <p>Welcome, regular user!</p>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

export default App;

isLoggedIn과 isAdmin을 사용하여 조건에 따라 서로 다른 메세지를 출력하는 예제이다.

 

 

 

위의 예제는 삼항연산자를 사용했지만 if 문 등을 이용해서 여러 조건에 따라 다른 UI를 렌더링하기 위해 사용 할 수 있으니 많이 만들어보고 익히도록 하자.