React의 조건부 렌더링을 사용하면 상태나 소품과 같은 특정 조건에 따라 다양한 구성 요소나 요소를 렌더링할 수 있습니다. 조건부 렌더링을 수행하는 몇 가지 일반적인 방법은 다음과 같습니다.

1. If-Else 문 사용

구성 요소 내에서 표준 JavaScript if-else 문을 사용할 수 있습니다.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return 
Welcome back!
;
    } else {
        return 
Please sign in.
;
    }
}

2. 삼항 연산자 사용

이것은 조건에 따라 콘텐츠를 렌더링하는 간결한 방법입니다.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        
    );
}

3. 논리 && 연산자 사용

조건이 true인 경우에만 논리 AND 연산자를 사용하여 구성요소를 렌더링할 수 있습니다.

function MyComponent({ isLoggedIn }) {
    return (
        

            {isLoggedIn && 
Welcome back!
}
            {!isLoggedIn && 
Please sign in.
}
        
    );
}

4. 스위치 문

더 복잡한 조건의 경우 스위치 문을 사용할 수 있습니다.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return 
Loading...
;
        case 'success':
            return 
Data loaded successfully!
;
        case 'error':
            return 
There was an error!
;
        default:
            return null;
    }
}

예

다음은 기능적 구성 요소를 사용한 전체 예입니다.

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        

             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
            {isLoggedIn ? 
Welcome back!
 : 
Please sign in.
}
        
    );
}

export default App;

요약

상황의 복잡성과 개인 코딩 스타일을 기반으로 요구 사항에 가장 적합한 방법을 선택하세요. 더 많은 예시나 설명이 필요하면 알려주세요!