[React] Conditional Rendering

 

✔ Conditional Rendering (조건부 렌더링)

: 어떠한 조건에 따라서 렌더링이 달라지는 것

function UserGreeting(props) {
    return <h1>다시 오셨군요!</h1>;
}

function GuestGreeting(props) {
    return <h1>회원가입을 해주세요.</h1>;
}

위 코드는 각각 회원, 비회원에게 보여줄 함수 컴포넌트이다.

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    
    if(isLoggedIn) {
    	return <UserGreeting />;
    }
    return <GuestGreeting />;
}

로그인 여부에 따라 다른 문구가 뜨는 Greeting 함수이다.

 

 

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

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

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)


// falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

 

 

 

✔ Element Variables

function LoginButton(props) {
    return (
    	<button onClick={props.onClick}>
            로그인
        </button>
    );
}

function LogoutButton(props) {
    return (
    	<button onClick={props.onClick}>
            로그아웃
        </button>
    );
}

function LoginControl(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    
    const handleLoginClick = () => {
        setIsLoggedIn(true);
    }
    
    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }
    
    let button;
    
    if (isLoggedIn) {
        button = <Logoutbutton onClick={handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={handleLoginClick} />;
    }
    
    return (
    	<div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    )
}

위 코드에서 if 문을 보면 isLoggedIn 의 값에 따라서 button 이라는 변수에 컴포넌트를 대입하는 것을 볼 수 있다. 그리고 아래에 {button} 과 같이 대입된 변수를 return 에 넣어 실제로 컴포넌트가 렌더링이 되도록 만들고 있다.

 

이처럼 element 를 변수처럼 저장하여 사용하는 방법을 element variable 이라고 부른다.

 

 

✔ Inline Conditions

: 조건문을 코드 안에 집어넣는 것

 

• true && expression -> && 앞의 조건이 true 이기 때문에 그 뒤의 조건도 참이어야 한다. 그래서 expression 까지 검사

• false && expression -> && 앞의 조건이 이미 false 이기 때문에 그 뒤 조건은 볼 필요도 없다. 그래서 false 까지 검사

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    
    return (
    	<div>
            <h1>안녕하세요!</h1>
            {unreadMessages.length > 0 &&
            	<h2>
                    현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
                </h2>
            }
        </div>
    );
}

위 코드를 보면 && 앞의 조건이 읽지 않은 메시지가 1개 이상이어야 한다고 되어있다. (unreadMessage.length > 0)

그래서 그 조건이 false 가 된다면 && 뒤의 조건은 볼 필요도 없어서 실행되지 않는다.

 

 

 

✔ Inline If-Else

: 삼항연산자를 사용한다. (condition ? true : false)

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

function LoginControl(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handelLoginClick = () => {
        setIsLoggedIn(true);
    }

    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }


    return (
        <div style={styles.text}>
            <Greeting isLoggedIn={isLoggedIn} />
            {isLoggedIn
                ? <LoginButton onClick={handleLogoutClick} />
                : <LoginButton onClick={handelLoginClick} />
            }
        </div>
    )
}

위의 LoginControl 컴포넌트를 삼항연산자로 바꾸어주었다. 실행해 보면, 동일하게 실행된다.

 

 

 

✔ Component 렌더링 막기

: null 을 return 하면 렌더링되지 않는다.

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

위 코드는 props.warning 의 값이 false 인 경우에 null 을 반환한다.

function MainPage(props) {
    const [showWarning, setShowWarning] = useState(false);
    
    const handleToggleClick = () => {
        setShowWarning(prevShowWarning => !prevShowWarning);
    }
    
    return (
    	<div>
           <WarningBanner warning={showWarning} />
            <button onClick={handleToggleClick}>
            	{showWarning ? '감추기' : '보이기'}
            </button>
        </div>
    )
}

보이기 버튼을 누르면 경고! 글자와 함께 감추기 버튼으로 바뀐다.