React - Conditional Rendering과 Inline Conditions

Conditional Rendering(조건부 렌더링)

• 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미한다.
• 여기서의 조건은 if와 같은 조건문이라고 생각하면 된다.
• 예를 들면 조건문의 결과가 True이면 버튼을 보여주고, False이면 버튼을 가리는 경우를 말한다.

 

 

JavaScript의 Truthy & Falsy

• True나 False는 아니지만, True or False로 여겨지는 값을 의미한다.
• 조건문에서 사용하게 된다면 결과가 True가 될지 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

• 리액트의 element를 변수처럼 다루는 방법을 말한다.

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>
    )
}

• isLoggedIn의 조건 결과에 따라 button이라는 변수에 컴포넌트를 대입한다.
• 여기서 컴포넌트는 컴포넌트로부터 생성된 리액트 엘리먼트가 된다.
• 그다음 button을 return문에 넣어 컴포넌트가 렌더링되도록 한다. 

 

 

Inline Conditions

• 조건문을 간결하게 표현하기 위한 방법이다.

 

Inline If

• && 연산자를 사용하면 첫번째 조건이 True일 때만 두번째 조건이 수행되기 때문에 이를 이용한다.

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

• {unreadMessages.length > 0이면 메시지가 렌더링되며,
• {unreadMessages.length <= 0이면 아무것도 렌더링되지 않는다.  

 

Inline If-Else

• 삼항연산자이다.
• condition ? true : false

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

• true면 '로그인', false면 '로그인하지 않은'이 리턴된다.

 

 

Component를 렌더링하고 싶지 않을 때는 null을 리턴하면 된다.

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

// WarningBanner 컴포넌트 사용

function MainPage(props) {
	const [showWarning, setShowWarning] = useState(false);
    
    const handleToggleClick = () => {
    setShowWarning(prevShowWarning => !prevShowWarning);
    }
    
    return (
        <div>
            <WarningBanner warning={showWarning} /> // WarningBanner 결과에 따라 출력 여부 결정
            <button onClick={handleToggleClick}>
                {showWarning ? '감추기' : '보이기'}
            </button>
        </div>
    )
}

 

 

 

 

참고

인프런 - 처음 만난 리액트