Front/React

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

oodada 2024. 11. 2. 19:50

조건부 렌더링 (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로 변경합니다.

'Front > React' 카테고리의 다른 글

React Native 시작하기  (0) 2024.11.02
React Recoil 로 todolist 제작하기  (0) 2024.11.02
React의 핵심 개념  (1) 2024.10.27
Rudux로 전역 상태 관리하기  (0) 2024.05.04
[React style] chakra-ui theme 설정  (0) 2024.04.13
티스토리 친구하기