댓글 검색 목록

[Reactjs] React강좌 - 10 - JSX를 반환하는 여러 가지 방법

페이지 정보

작성자 운영자 작성일 19-07-30 23:05 조회 469 댓글 0

JSX는 유연성이 뛰어나므로 훌륭한 도구입니다. 같은 것을 달성하는 데는 여러 가지 방법이 있습니다. 이러한 이유로 새로운 개발자가 JSX 요소를 정의하고 반환하기 위한 다양한 전술을 볼 때 혼란스러울 수 있습니다.

JSX 요소를 반환 할 수 있는 여러 가지 방법을 살펴 보겠습니다.

React에서는 JSX 템플릿을 반환하는 다른 방법을 볼 수 있습니다. 그들 모두를 보아서 무엇이 유효하고 그렇지 않은지 알고 있는 것이 좋습니다.

요소를 직접 반환

우리는 이전 예제에서 했던 것처럼 반환 직후 요소를 반환 할 수 있습니다.

// return the element directly
return <div>hello</div>;

wrapper()로 반환

전체 JSX 리턴을 괄호로 묶음으로써 다중 라인 JSX 리턴을 만들 수 있습니다.

// return with a wrapper ()
return (
    <div>what's up</div>
);

참고 : 여기에서 주목해야 할 중요한 점은 수익에는 항상 하나의 상위 요소가 있어야 한다는 것입니다. 유효한 JSX 반환 값과 유효하지 않은 JSX 반환 값의 비교는 다음과 같습니다.

// NOT VALID: 2 top-level elements
return (
    <div>what's up</div>
    <div>what's up</div>
);

// VALID: must have 1 top-level (parent) element
return (
    <div>
        <div>what's up</div>
        <div>what's up</div>
    </div>
);

삼원 항의 반환

엘리먼트를 직접 반환 할 수 있는 것처럼, 우리는 엘리먼트를 3 진 문에서 반환 할 수 있다.

즉, true / false 값이 있는지 빠르게 확인한 다음 두 요소 중 하나를 반환 할 수 있습니다.

// return out of a javascript ternary
return isActive ? <div>i am active!</div> : <div>inactive</div>;

또한 괄호로 묶인 더 큰 삼항 항을 사용할 수 있습니다 :

// return out of a larger ternary
return isActive ? (
    <div>
        <h2>bunch of stuff</h2>
        <p>look im a paragraph</p>
    </div>
) : (
    <div>inactive</div>
);

JSX 요소를 직접 반환하거나 더 큰 코드 블록에 대해서는 ()로 묶을 수 있습니다.

빠른 반환

또 다른 유용한 패턴은 구성 요소의 초기에 요소를 반환하는 것입니다. 이렇게 하면 true 진술이 발견되면 구성 요소 실행을 중단 할 수 있습니다. 사용자가 로그인 한 경우 <LoggedIn /> 구성 요소를 반환하는 방법에 유의하십시오.

function Nav() {
    const isLoggedIn = true;

    // user is logged in. return this component and stop executing
    if (isLoggedIn) return <LoggedIn />;

    // user wasnt logged in. show this stuff
    return (
        <div>you need an account</div>
    );
}