React의 조건부 렌더링

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

1. If-Else 문 사용

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

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

2. 삼항 연산자 사용

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

function MyComponent({ isLoggedIn }) {
    return (
        <h1>
            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        </h1>
    );
}

3. 논리 && 연산자 사용

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

function MyComponent({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn && <h1>Welcome back!</h1>}
            {!isLoggedIn && <h1>Please sign in.</h1>}
        </div>
    );
}

4. 전환 설명

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

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

예

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

import React from 'react';

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

    return (
        <div>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

export default App;

요약

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

위 내용은 React의 조건부 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!