동적 UI

동적 UI를 사용하기 위한 3-steps

1. HTML/CSS를 사용하여 미리 디자인을 만든다
2. UI의 현재 상태를 state로 저장한다.
3. 해당 state에 따라 UI가 어떻게 보일지 작성한다.

---

HTML에서 조건문 사용하기

삼항연산자를 사용한다.

{
	condition == true ? true_result : false_result
}

---

글 제목을 클릭하면 특정 컴포넌트의 state가 변경되도록 구현하는 예제

function Component() {
	return(
    	<div className="comp">
			<h4>세부 제목</h4>
			<p>상세 내용</p>
		</div>
	);
}

function App() {
	let [comp, setComp] = useState('closed');
    
    function switchComp() {
    	if (modal == 'closed') setModal('opened');
        else setModal('closed');
    }
    
    return (
    	...
		<div className="list">
			<h4 onClick={ () => { switchModal() } }>제목</h4>
			...
		</div>
        
		{
			comp == 'opened' ? <Component/> : null;
		}
	...
    );
}