React-기본문법(2)

boolean값에 따른 요소 보이기

ipmort {useState} from 'react';

const Sub = ({id,name}) => {
	return (
    	<ui>
        	<li>아이디: {id}</li>
            <li>이름: {name}</li>
        </ui>
    )
}

//클릭시 요소보이기 숨기기

const SelfButton = () => {
	
    const [toggle, setToggle] = useState(true)
    
    const login = toggle
    
    return(
    	<div>
        	<p>
            	{
            		login ? <button onClick={()=> (setToggle(!toggle)))> 로그인 </button>
                    :
                    <div>
                    <Sub id = 'idwnsdud1965' name='조준영'/>
                    
                    <button onClick={()=> (setToggle(!toggle))}>로그아웃</button>
					</div>                    
	            	
            	}
        	</p>
        </div>
    )


}