React 환경에서 동적인 UI 만들기 (삼항 연산자)

동적인 UI 만드는 3 step

1. html CSS로 미리 디자인을 완성한다.

2. UI의 현재 상태를 state로 저장한다.

3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성한다.

 

function App () {

    let [modal, setModal] = useState(false);

    return (
        <div>
            <button onClick={()=>{ setModal(!modal) }}>모달창 여닫기</button>
            {
            	modal === true
                ? <Modal />
                : null
            }
        </div>
    )
}

function Modal () {
	return (
    	<div>
        	나는 모달창
        </div>
    )
}

 

 

 

JSX에서 조건문 쓰는 법

JSX 안에서는 if else 문법을 바로 사용할 수 없다. 때문에 삼항연산자를 써야한다.

삼항연산자는 JSX 중괄호 안에서 사용 가능하다.

 

조건식 ? 조건이 참일 때 : 조건이 거짓일 때;

let state =  3 > 1 ? "맞음" : "아님";
console.log(state); 	// 맞음