[React] 리액트에서 if문 , 조건부 렌더링 패턴

1. 삼항 연산자 (Ternary Operator)

가장 간단한 조건부 렌더링 패턴 중 하나

return (
  <div>
    {condition ? <ComponentA /> : <ComponentB />}
  </div>
);

2. && 연산자

&& 연산자는 조건이 참일 때만 다음 값이 렌더링되도록 한다.

return (
  <div>
    {isLoggedIn && <UserDashboard />}
  </div>
);

3. 조건부 연산자 (Logical && Operator)

JavaScript의 논리 연산자를 사용하여 조건에 따라 값을 반환할 수 있다.

jsxCopy code
return (
  <div>
    {isAdmin && <AdminPanel />}
  </div>
);

4. 조건문 밖에서 렌더링 변수 설정

조건문 밖에서 변수를 설정하고, 그 변수를 사용하여 렌더링하는 방식이다.

jsxCopy code
let componentToRender;

if (condition) {
  componentToRender = <ComponentA />;
} else {
  componentToRender = <ComponentB />;
}

return <div>{componentToRender}</div>;

5. 조건부 렌더링 함수

조건부로 렌더링을 수행하는 함수를 만들어 사용할 수도 있다.

jsxCopy code
const renderConditionalComponent = () => {
  if (condition) {
    return <ComponentA />;
  } else {
    return <ComponentB />;
  }
};

return <div>{renderConditionalComponent()}</div>;

6. 조건부 렌더링 맵핑

배열에 조건부로 렌더링할 컴포넌트들이 있다면, map 함수를 사용할 수 있다.

jsxCopy code
const componentsToRender = [conditionA && <ComponentA />, conditionB && <ComponentB />];

return <div>{componentsToRender}</div>;