State2 동적인 UI 만드는 3단계 동적인 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 ? : '' 또는 null } =>참일때 모달 .. 2023. 3. 5. 컴포넌트 만들기 상세페이지 기능! => 페이지 완전 변환이 아닌 같은 페이지 내 상세페이지(실은 모달창) 만 백만개쯤 작성함 이걸 깔끔하게 줄여주는게 : 컴포넌트(이렇게 한단어로 축약한것) 1-1. function 만들기 -다른 함수 바깥에 + function 이름은 영어대문자로 시작 -e.g.)function Modal(){} 1-2. return() 안에 html 담기 -return안에는 항상 하나의 태그만 (태그 병렬 no, 그대신 그 하나의 태그안에 다른 태그 담는건 가능) function Modal(){ return( 제목 날짜 상세내용 ) } 1-3. 쓰기 -원래 사용하려던 태그 안에 이렇게 넣어줌 2. let Modal = () => { return( ) } *이걸 const Modal = () => {}로.. 2023. 3. 4. 이전 1 다음