conditional rendering

어떠한 조건에 따라서 렌더링이 달라질 때 자주 쓰이기 때문에사용 방법과 원리에 대해서 잘 이해하고 넘어가야한다.

truthy falsy

boolean 자료형
true / false

 

• true는 아니지만 true로 여겨지는 값: truthy

{} : empty object
[] : empty array
number : not zero
"0", "false" : String, not empty

 

• false는 아니지만 false로 여겨지는 값 : falsy

false
0, -0 : zero, minus zero
'', "", `` : empty string
null
undefined
NaN

 

 

---

Element Variables (엘리먼트 변수)

• 렌더링 해야할 컴포넌트를 변수처럼 다루고 싶을 때 사용한다.

 

import React from 'react'
import { useState } from 'react'

function LoginControl(props) {

    const [isLoggedIn, setIsloggdIn] = useState(false)
    const handeLoginClick = () => {
        setIsloggdIn(true)
    }

    const handleLogOutClick = () => {
        setIsloggdIn(false)
    }

    let button; // 컴포넌트 대입

    if (isLoggedIn) { //true라면 로그인 된 상태여서 로그아웃 버튼이 전달됨 
        button = <LogoutButton onClick={handleLogOutClick} />
    } else { //false일 경우 로그인 버튼이 전달 
        button = <LoginButton onClick={handeLoginClick} />
    }

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button} //실제로 엘리먼트
        </div>
    )
}

export default LoginControl

• isLoggedIn값에 따라서 변수에 컴포넌트를 대입하고 있다.
• 컴포넌트가 대입된 변수를 return에 넣고 실제로 컴포넌트가 렌더링 되도록 만들어진 리액트 엘리먼트이다.

---

inline conditions

• 위에 변수에 컴포넌트를 대입한것보다 조금 더 간결하게 사용할 수 있다.
• 조건문을 코드 안에 집어넣는 의미이다.

[line if]
jsx에서는 중괄호를 사용해서 입력한다.
if문을 필요한 곳에 직접 넣어서 사용하는 의미이다.

• && 논리 연산자를 사용한다. (단축평가)
• 결과가 정해져있는 문에서 굳이 불필요한 연산은 하지 않는것이다.
• 양쪽에 나오는 조건이 모두 true일 경우에만 실행한다.
• 한쪽의 조건문이 하나라도 false일 경우 false를 반환한다.

 

function conditional() {
    return (
        <div>
            <h1>안녕하세요.</h1>
            {
                unreadMessages.lenght > 0 &&
                    <h2>
                        현재 {unreadMessages.lenght}개의 읽지 않은 메세지가 있습니다. 
                    </h2>
            }
        </div>
    )
}

 

• unreadeMessages.lenght의 크기가 0보다 작으면 아무것도 렌더링 되지 않는다.

import React from 'react'

function conditional() {
    const count = 0
    return (
        <div>
            {count && <h1>현재 카운트: {count}</h1>}
        </div>
    )
}

export default conditional

//출력결과 : <div>0</div>
// 화면에 아무것도 안나오는 것이 아니라. 결과값이 그대로 리턴된다. 

 

주의사항

• && 연산자 사용 중에 조건문에 falsy expresstion을 사용한다면 뒤에 나오는 조건문은 평가되지 않지만, falsy expresstion의 결과값이 그대로 return된다.

---

inline if-Else

앞의 inline if는 보여주거나 혹은 안보여주거나의 조건이였지만, inline if-Else는 조건문의 값에 따라 다른 엘리먼트를 보여줄 때 사용한다. 이를 위해 삼항연산자를 사용한다.

 

//문자열로 사용할 때
    return (
        <div>
            이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않은'}</b> 상태입니다.
        </div>
    )

 

 

// 조건에 따른 컴포넌트 렌더링
import React from 'react'

function UserStatus(props) {
    const handelLogoutClick = () => {
        isLoggedIn(true)
    }
    const handelLoginClick = () => {
        isLoggedIn(false)
    }
    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {
                isLoggedIn
                    ? <LogoutButton onClick={handelLogoutClick} />
                    : <LoginButton onClick={handelLoginClick} />
            }
        </div>
    )
}

export default UserStatus

 

 

---

컴포넌트를 렌더링 하고 싶지 않을 때는?

• 리액트에서는 null을 리턴하면 렌더링하지 않는다.

import React from 'react'

function WarningBanner(props) {
    if (!props.warning) { return null }
    return (
        <div>경고
        </div>
    )
}

export default WarningBanner

• props.warning의 값이 false인경우 null을 return시킨다.
• rops.warning의 값이 true인 경우에만 경고메세지를 출력한다.

 

import React from 'react'
import { useState } from 'react'
import WarningBanner from './WarningBanner'

function Greeting(props) {
    const [showMessages, setShowMessages] = useState(false)

    const handleToggleClick = () => {
        setShowMessages(prevshowWarning => !prevshowWarning)
    }
    return (
        <div>
            <WarningBanner warning={showMessages} />
            <button onClick={handleToggleClick}>
                {showMessages ? '감추기' : '보이기'}
            </button>
        </div>
    )
}

export default Greeting

• true일때: 경고와 함께 감추기가 보여진다.
• false일때: null / 보이기

 

---

로그인 여부를 나타내는 툴바 만들기

//Toolbar.jsx
import React from 'react'

function Toolbar(props) {

    const { isLoggedIn, onClickLogin, onClickLogout } = props;
    return (
        <div>
            {isLoggedIn && <span>환영합니다!</span>}
            {isLoggedIn ? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )}
        </div>
    )
}

export default Toolbar

 

//LandingPage.jsx
import React from 'react'
import Toolbar from './Toolbar'
import { useState } from 'react'
function LandingPage(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)

    const onClickLogin = () => {
        setIsLoggedIn(true)
    }
    const onClickLogout = () => {
        setIsLoggedIn(false)
    }
    return (
        <div>
            <Toolbar
                isLoggedIn={isLoggedIn}
                onClickLogin={onClickLogin}
                onClickLogout={onClickLogout}
            />
        </div>
    )
}

export default LandingPage