사용자의 요소를 숨기고 표시하는 것은 응용 프로그램에서 해야 할 가장 일반적인 작업 중 하나입니다. 

이것은 JSX로 시작할 때 저를 버렸던 것들 중 하나입니다.

일반적인 경우 예를 들어 로그 아웃 한 사용자는 로그인 버튼을 보고 로그인 한 사용자는 로그 아웃 버튼을 볼 수 있습니다.

JSX에서는 &&를 사용하여 항목을 숨기거나 표시 할 수 있습니다. 우리는 조건을 보여줄 수 있고 그 조건이 사실이라면 그 요소를 보여줄 수 있습니다.

&&를 논리 AND 연산자라고 합니다. 자세한 내용은 여기를 참조하십시오. 

다음은 사용자가 존재하는 경우에만 메시지를 보여줍니다.

return (
    <div>

        {user && <h1>Hello person!</h1>}

    </div>
);

우리는 JSX 대괄호를 사용하고 React는 대괄호 안의 모든 것을 평가할 것입니다. 해당 사용자를 확인한 다음 사용자가 있는 경우에만 <h1>을 표시합니다.

기본 예제 

사용자가 로그인 한 경우를 기준으로 로그 아웃 버튼을 보여줍니다.

function App() {
    const isLoggedIn = true;

    return (
        <div>

            {/_ show the logout button if the user is logged in _/}
            {isLoggedIn && <a href="/logout">Logout</a>}

        </div>
    );
}

isLoggedIn이 true인지 확인하려고 합니다. 이 조건이 참이면 React는 && 다음에 아무 것도 표시하지 않습니다.

우리는 근본적으로 "이 조건이 사실인지 확인한 다음이 것을 보여줍니다!"라고 말하고 있습니다. 

조건이 충족되는지 확인하기 위해 비교 검사를 수행 할 수도 있습니다.

function App() {
    const user = { name: 'chris', role: 'admin' };

    return (
        <div>

            {/_ only show if the user is an admin _/}
            {user.role === 'admin' && <a href="/manage">Manage</a>}

        </div>
    );
}

또한 isAdmin 부울을 생성하여 조금 더 읽기 쉽도록 위를 단순화 할 수 있습니다.

function App() {
    const user = { name: 'chris', role: 'admin' };

    // create a boolean so we can simplify our template
  const isAdmin = user.role === 'admin';

    return (
        <div>

            {/_ only show if the user is an admin _/}
            {isAdmin && <a href="/manage">Manage</a>}

        </div>
    );
}

반대편 표시 (부정) 

이제 로그인 버튼을 표시하는 방법을 살펴 보겠습니다.

function App() {
    const isLoggedIn = true;

    return (
        <div>

            {/_ show the login button if the user is logged out _/}
            {!isLoggedIn && <a href="/login">Login</a>}

            {/_ show the logout button if the user is logged in _/}
            {isLoggedIn && <a href="/logout">Logout</a>}

        </div>
    );
}

사용자가 로그인 한 경우의 반대를 확인하기 위해 isLoggedIn을 사용하는 방법에 유의하십시오.

여러 조건에 따라 숨기기 / 표시 

단일 조건 외에도 무언가를 표시하기 전에 여러 조건이 충족되는지 확인할 수 있습니다.

이 예에서는 사용자가 활성 상태이고 사용자가 구독자인지 확인하고자 합니다.

function App() {
    const isActive = true;
    const isSubscriber = true;

    return (
        <div>

            {/_ only show if active and a subscriber _/}
            {isActive && isSubscriber && <a href="/manage">Manage</a>}

        </div>
    );
}

삼항 연산자 사용 

논리적 AND 연산자 외에도 3 가지 연산자를 사용하여 두 조건을 단순화 할 수 있습니다.

function App() {
    const isLoggedIn = true;
    const isSubscriber = true;

    return isLoggedIn 
        ? <div>i am logged in</div>
        : <div>i am logged out</div>;
}

다음은 인라인 삼항의 또 다른 예입니다. 삼항 항이 중괄호 안에 있는 한, React는 삼항 항 연산자를 평가할 것입니다.

function App() {
    const isLoggedIn = true;

    return (
        <div>

            {/_ only show if active and a subscriber _/}
            {isLoggedIn                     ? <div>i am logged in</div>
                    : <div>i am logged out</div>
            }

        </div>
    );
}