본문 바로가기
카테고리 없음

동적인 UI 만드는 3단계

by 코디드 2023. 3. 5.

동적인 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 나옴.