조건부 렌더링 (Conditional Rendering) - React 배우기

조건부 렌더링 (Conditional Rendering)

• 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.
• React에서는 삼항 연산자나 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.

1. 삼항 연산자

• 삼항 연산자는 조건에 따라 다른 값을 반환하는 연산자입니다.

import React from 'react';

function App() {
  const isLogin = true;

  return <div className="App">{isLogin ? <p>로그인 중</p> : <p>로그인 해주세요</p>}</div>;
}

export default App;

2. && 연산자

• && 연산자는 조건이 참일 때만 결과를 반환하는 연산자입니다.

import React from 'react';

function App() {
  const isLogin = true;

  return <div className="App">{isLogin && <p>로그인 중</p>}</div>;
}

export default App;

• 삼항 연산자와 && 연산자는 각각의 상황에 따라 사용하면 됩니다.
• 삼항 연산자는 조건이 참일 때와 거짓일 때 모두 결과를 반환할 때 사용하고, && 연산자는 조건이 참일 때만 결과를 반환할 때 사용합니다.

3. 조건부 렌더링 예제

• 아래 코드는 isLogin 상태에 따라 다른 결과를 보여주는 예제입니다.

import React, { useState } from 'react';

function App() {
  const [isLogin, setIsLogin] = useState(false);

  const handleLogin = () => {
    setIsLogin(true);
  };

  const handleLogout = () => {
    setIsLogin(false);
  };

  return (
    <div className="App">
      {isLogin ? (
        <div>
          <p>로그인 중</p>
          <button onClick={handleLogout}>로그아웃</button>
        </div>
      ) : (
        <div>
          <p>로그인 해주세요</p>
          <button onClick={handleLogin}>로그인</button>
        </div>
      )}
    </div>
  );
}

export default App;

• isLogin 상태가 true이면 "로그인 중"과 "로그아웃" 버튼을 보여주고, false이면 "로그인 해주세요"와 "로그인" 버튼을 보여줍니다.
• "로그인" 버튼을 클릭하면 handleLogin 함수가 호출되어 isLogin 상태를 true로 변경하고, "로그아웃" 버튼을 클릭하면 handleLogout 함수가 호출되어 isLogin 상태를 false로 변경합니다.