React - 조건부 렌더링

조건부 렌더링

정의

• 프로그램의 상태에 따라서 컴포넌트 일부만 렌더링 하는 것
• 요소를 표시/숨기기나 인증을 처리하는 등의 용도로 처리가 가능함
• if나 조건부 연산자 등을 이용하여 구현 가능함

예시

• 로그인 되지 않은 상태

• 로그인 된 상태

사용한 코드

{isLogged ? (<button className='login-button-class' onClick={onLogout}>로그아웃</button>) : 
(<Link to="/login" className='login-button-class'>로그인</Link>)}

사용 방법

//if문 사용 방식
function LoginComp(comp){
    const loggedBool = comp.isLogged;
    if(loggedBool){
        return(
        <logout/>
        )
    }
    return(
    	<logout/>
    )
}


//삼항 연산자 사용 방식
//condition ?. true : false의 방식으로 작동
function LoginComp(comp){
    const loggedBool = comp.isLogged;
    
    return(
        <>
        	{loggedBool ? <logout/> : <login/>}
        </>
    )
}

• 삼항 연산자를 사용하는 경우에는 return문 한 개 만으로도 사용 가능하다