동적인 UI 만드는 3단계(이걸 기억하고 동적인 상태 변화 줄때마다 활용)
1. html css로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장
let [ 변수, set변수] = useState();
▼형식은 자유/모달창 상태 표현만 가능하면 됨.
-e.g.) let [modal, setModal] = useState(false);
3. state에 따라 UI가 어떻게 보일지 작성 (조건문 사용)
JS를 써야하니 {}열고 대신 html 이므로 JS if 문, for 반복문 사용 불가
=>조건문은 삼항연산자 사용(ternary operator) - 조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드
-e.g.)
{
modal == true ? <Modal/> : '' 또는 null
}
=>참일때 모달 컴포넌트 적용/ 거짓일 때 null값 적용
e.g.)<h4 onClick={()=>{ setModal(modal=true) }}>
<h4 onClick={()=>{ setModal(true) }}>
이렇게 하면 제목 눌러서 한번 나타나게 하기 가능
그냥 생 JS는 버튼 누르면 모달창 html을 직접 건드림
현재 react 에선 버튼 누르면 모달창 스위치(state)만 건드림
과제: 누르면 나타나고 다시 누르면 사라지게 만들기!
<h4>에서 onClick 내부 함수만 바꿔주면 됨.
<h4 onClick={()=>{ setModal(modal == false ? true : modal == true ? false : true) }}>
이렇게 하면 됨.
답을 봤더니 if문 삼항연산자 쓰세요 라고 해서 이라고 생각해서 스스로 뿌듯해 하다가
<h4 onClick={()=>{ setModal(!modal) }}> 보고 아... 갈길이 멀다 느낌
!modal 하나면 true일 때 false/ false 일때 true 나옴.