[React] 리액트 조건부 렌더링

React에서의 조건부 렌더링

React에서 조건부 렌더링은 특정 조건에 따라 컴포넌트를 표시하거나 숨길 때 사용

---

1. if문 사용

JSX 외부에서 조건에 따라 전체 컴포넌트 또는 JSX 블록을 처리할 때 유용함

예제: 컴포넌트 렌더링

import Login from "../Login";
import Logout from "../Logout";

export default function IfExample() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    return <Login />;
  }
  return <Logout />;
}

예제: 간단한 메시지 출력

export default function IfExample() {
  const isLoggedIn = false;

  if (isLoggedIn) {
    return <h2>환영합니다!</h2>;
  }
  return <h2>로그인이 필요합니다.</h2>;
}

---

2. 삼항 연산자

JSX 내부에서 참과 거짓에 따라 다른 요소를 렌더링할 때 사용

1. 단순 텍스트 조건부 렌더링

export default function TernaryExample() {
  const isLoggedIn = true;

  return (
    <>
      <h1>{isLoggedIn ? "로그인 되었습니다" : "로그인이 필요합니다"}</h1>
    </>
  );
}

2. JSX 요소 조건부 렌더링

{isLoggedIn ? <h1>로그인 되었습니다</h1> : <h1>로그인 되지 않았습니다</h1>}

3. 컴포넌트 조건부 렌더링

{isLoggedIn ? <Login /> : <Logout />}

4. 인라인 스타일 조건부 적용

<h1 style={{ color: isLoggedIn ? "red" : "blue" }}>로그인</h1>

5. 클래스명 조건부 적용

<h1 className={`${isLoggedIn ? "text-rose-400" : "text-green-600"}`}>로그인</h1>

6. Tailwind Merge를 활용한 조건부 스타일링

<h1 className={twMerge(isLoggedIn ? "text-rose-400" : "text-gray-500")}>로그인</h1>

---

3. && 연산자

JSX 범위 안에서 참에 따른 분기 처리를 하고 싶을 때

예제: 특정 컴포넌트 렌더링

import Login from "../Login";
// 내가 true일 때만 렌더링하고 싶을 때 사용
// flase는 신경 안 쓰고 싶다! 하면 이렇게
export default function AndExample() {
  const isLoggedIn = true;

  return (
    <>
      {isLoggedIn && <Login />}
      <h2>이 메시지는 항상 보입니다.</h2>
    </>
  );
}

예제: 클래스 이름 적용

import { twMerge } from "tailwind-merge";

export default function AndExample() {
  const isLoggedIn = true;

  return (
     {/* 클래스네임 조건부 */}
      {/* style로는 불가능 */}
    <h1 className={twMerge(isLoggedIn && "text-green-600")}>
      조건부 클래스 적용
    </h1>
  );
}

---

4. 즉시 실행 함수 (IIFE)

🤔 JSX 표현식에서 if문 사용 불가? 놉, IIFE(즉시실행함수)로 사용 가능

IIFE를 사용하여 JSX 표현식 내에서 if문을 사용하는 방법

1. 함수를 소괄호 ()로 감싸기
2. 함수를 즉시 실행하기 위해 끝에 ()를 추가
3. 함수 내부에서 일반적인 if-else 문 사용 가능

예제: if문으로 조건부 렌더링

export default function IIFE() {
  const isLoggedIn = true;

  return (
    <>
      {(() => {
        if (isLoggedIn) {
          return <h2>로그인 되었습니다</h2>;
        } else {
          return <h2>로그인이 필요합니다</h2>;
        }
      })()}
    </>
  );
}

💡 참고: IIFE 활용 시 JSX 표현식 내부에서도 if문 사용 가능. 단, 가독성을 위해 외부 처리나 삼항/&& 연산자 사용이 일반적임

---

조건부 렌더링의 선택 기준

방법	사용 상황
if문	JSX 외부에서 전체 블록 또는 컴포넌트를 조건부로 처리할 때
삼항 연산자	JSX 내부에서 참과 거짓에 따라 다른 결과를 렌더링할 때
&& 연산자	JSX 내부에서 ****조건이 참일 때만 특정 요소를 렌더링할 때