본문 바로가기
code.camp

우편, 주소 상세보기, 툴팁, 패스워드, UI배치

by jyamin 2021. 10. 22.
728x90

7/21

프로그래머스

하샤드 수

reduce

 

우편

우편번호 검색 = 클릭시 모달창이 열려야 함

주소 상세보기

 

이렇게 모달창이 열리게 되는것
트루니까 모달창이 뜨게 되는 것, autoClose를 넣으면 클릭할때 사라지는것
영등포 입력하고 클릭하면 왼쪽 밑에 박스가 열림

조건부 렌더링

이거를
props로 받게 됨
value에 넣어줌

 

입력을 하게 되면 위 함수가 실행이 됨 

 

등록하기를 누르면 실행되는 함수

이렇게 작성할 수 있음(커서 있는 곳은 객체라서 {중괄호} 해야함
오른쪽에 있는건 스테이트들(value)

 

모달
알림을 띄게하는 모달

 

전환, state에 임시로 저장해야함

상세보기 화면

툴팁 설명

주소와 상세주소가 같이 나오게 한 것
물음표 확인 필수

객체안에 꺼내오는 것

isOpen을 사용하여 모달창을 만듬

모달을 열어줌

 

패스워드

이렇게 패드워드를 넣어줌
게시글 아이디를 뜻함
댓글을 삭제하는건 댓글 아이디를 삭제하는것

(10개 넘겨줬었음)

여기서 뽑음
비번이 틀렸으면 비밀번호가 틀렸습니다 나오게 하는것

 

레이아웃

app.tsx
바디만 변경할 수 있도록 만듬
자식이 있으면 자동으로 children이 붙음

 

 

 

이렇게!

 

 

 

 

 

728x90

댓글