React 조건부 렌더링 (Conditional Rendering)

📜 조건부 렌더링 (Conditional Rendering)

React에서는 조건에 따라 UI를 동적으로 변경하는 조건부 렌더링을 활용할 수 있습니다. 조건부 렌더링을 통해 특정 상태에 따라 다른 UI를 표시할 수 있습니다.

🔍 기본적인 조건부 렌더링

조건부 렌더링은 JavaScript의 조건문을 사용하여 React 컴포넌트에서 특정 조건에 맞는 요소를 렌더링 하는 방법입니다.

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>환영합니다!</h1>;
  } else {
    return <h1>로그인해주세요.</h1>;
  }
}
  

위 예제에서는 isLoggedIn이라는 prop 값을 통해 사용자가 로그인했는지 여부를 확인하고, 그에 맞는 메시지를 출력합니다.

📝 JSX에서 조건부 렌더링

React에서 JSX는 JavaScript 코드이므로, JavaScript의 조건문을 사용하여 JSX를 동적으로 변경할 수 있습니다.

📌 if-else문

if-else문을 사용하여 조건부 렌더링을 할 수 있습니다.

function Greeting({ isMorning }) {
  if (isMorning) {
    return <h1>좋은 아침입니다!</h1>;
  } else {
    return <h1>좋은 저녁입니다!</h1>;
  }
}
  

📌 ternary operator (삼항 연산자)

삼항 연산자는 JSX 내에서 조건부 렌더링을 간결하게 할 때 유용합니다. JSX 내에서 조건을 바로 표현할 수 있습니다.

function Greeting({ isMorning }) {
  return (
    <h1>
      {isMorning ? '좋은 아침입니다!' : '좋은 저녁입니다!'}
    </h1>
  );
}
  

위 예제에서 삼항 연산자를 사용하여 조건에 맞는 메시지를 간결하게 출력할 수 있습니다. isMorning이 true이면 '좋은 아침입니다!'를, 그렇지 않으면 '좋은 저녁입니다!'를 출력합니다.

💡 조건부 렌더링 팁

• short-circuit evaluation (&&): 짧은 조건문을 사용할 때 유용합니다. 조건이 참일 경우 뒤의 요소를 렌더링합니다.

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <h1>환영합니다!</h1>}
    </div>
  );
}
  

위 예제에서 isLoggedIn이 true일 때만 <h1> 환영합니다! </h1>를 렌더링 합니다.

🎯 예제: 로그인 상태에 따른 UI 변경

로그인 여부에 따라 다른 UI를 렌더링 하는 간단한 예제를 만들어 보겠습니다.

import { useState } from 'react';

function LoginLogout() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <p>로그인 되었습니다.</p>
          <button onClick={() => setIsLoggedIn(false)}>로그아웃</button>
        </div>
      ) : (
        <div>
          <p>로그인하세요.</p>
          <button onClick={() => setIsLoggedIn(true)}>로그인</button>
        </div>
      )}
    </div>
  );
}
  

💡 요약

• if-else 또는 ternary operator를 사용하여 조건부로 UI를 렌더링할 수 있습니다.
• &&을 사용하여 짧은 조건문을 구현할 수 있습니다.
• 조건에 맞는 UI 요소를 효율적으로 렌더링하고, 상태에 따라 동적으로 UI를 변경하는 방법을 익혔습니다.