[React] 조건부 렌더링(Conditional Rendering)

Condition 은 조건을 의미한다.

조건부 렌더링(Conditional Rendering) : 특정 조건에 따라서 랜더링이 달라지는 것
보통 true / false 로 조건에 따라 다르게 렌더링한다.

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

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

개발시 true와 false를 예상하며 해야하기 때문에 구분할 줄 알아야 한다. 


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={handleLogoutClik} />;
    } else { 
        button = <LoginButton onClick={handleLogoutClik} />;
    }

	return (
    	<div>
        	<Greeting isLoggedIn={isLoggedIn} />
            {button}
        <div>
    )
}

 

Inline conditions : 조건문을 코드 안에 집어넣는 것
1. inline if (if문의 경우 && 연산자를 사용) &&는 흔히 로지컬 앤드 연산자라고 함. 

// true 이후 값 체크 
true && expression -> expression  

// false 이후 값 체크 X 이미 false
false && expression -> false 

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

&& 연산자 사용시 조건문에 false expression 사용시 뒤에 나오는  expression는 평가되지 않지만 
false expression 결과값이 return이 되어서 주의해야한다.

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

위 코드의 결과가 아무 것도 안나오는 것이 아닌,
count의 값인 0이 들어가서 <div>0</div> 가 리턴된다. 

2. inline if-Else : if-Else 문을 필요한 곳에 직접 넣어서 활용하는 방법. 
보통 삼항 연산자로 사용하며, 조건문에 값에 따라서 다른 Element를 보여줄 때 사용.

inline if : 보여주거나 안보여주거나
inline if-Else : 보여주는건 기본이고, 값에 따라 다른 Element를 보여줄 때

삼항 연산자는 
coundition ? true : false 
조건 ? 참시 리턴 : 거짓시 리턴

React에서 사용시 예시1

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

true시 '로그인' / false시 '로그인 하지 않은' 을 return (b 태그 안의 텍스트 값)

React에서 사용시 예시2

true시 'LogoutButton' / false시 'LoginButton' 을 return (div 태그 안의 텍스트 값)


Component 렌더링을 막기 위해서는?
React는 null을 리턴하면 렌더링하지않는다.