9.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 <UserGretting />;
    }
    return <GuestGreeting />;
}

예시

 

-Elemet 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] = useSate(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>
    );
}

예시

 

-inline conditions

코드를 별도로 분된 곳에 작성하지 않고 해당코드가 필요한 곳 안에 작성한다 = 조건문을 코드 안에 집어넣는 것

실제 if를 쓰진 않는다.

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

예시 - unreadMessages.length가 0보다 크면 <h2>가 출력이 되고 작거나 같으면 출력되지 않는다.

 

이때 앞에 부분은 값은 그대로 리턴 되기 때문에 주의해야한다.

const count =0;

return (
	<div>
    	{count && <h1>현재 카운트 : {count}</h1>}
    </div>
);

예시 - 이 경우 0이라는 count값이 출력된다.

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

예시 - 삼항 연산자를 이용해 두 결과값 중 하나는 반드시 나오도록 한다.

function LoginControl(props){
	const [isLoggedIn,setIsLoggedIn] = useSate(false);
    
    const handleLoginClick = () => {
    	setIsLoggedIn(true);
    }
    const handleLogoutClick = () => {
    	setIsLoggedIn(false);
    }
    
    return(
    	<div>
        	<Greeting isLoggedIn={isLoggedIn}/>
            {isLoggedIn ? 
            	<LogoutButton onClick={handleLogoutClick} />
                :<LoginButton onClick={handleLoginClick} />
            }
        </div>
    );
}

예시

 

-component 렌더링 막기

컴포넌트를 렌더링 하지 않으려면 null을 넣으면 된다.

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

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

예시

 

-실습

import React from "react";

const styles = {
    wrapper : {
        padding : 16,
        display : "flex",
        flexDirection: "row",
        borderBottom : "1px solid grey"
    },
    greeting : {
        marginRight : 8
    }
};

function Toolbar(props){
    const {isLoggedIn, onClickLogin, onClickLogout} = props;

    return(
        <div style={styles.wrapper}>
            {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}
        
            {isLoggedIn ? (<button onClick={onClickLogout}>로그아웃</button>)
                    :(<button onClick={onClickLogin}>로그인</button>)
            }
        </div>
    );
}

export default Toolbar;

Toolbar.jsx

 

import React, {useState} from "react";
import Toolbar from "./Toolbar";

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 style={{padding:16}}>======</div>
        </div>
    );
}

export default LandingPage;

LandingPage.jsx

 

(index.js 생략)

 

결과는 위와 같이 나오며 로그인을 누르면 설정한 인삿말과 버튼 안의 글씨가 바뀌는 걸 확인 할 수 있다.