2021.07.20

shong1332·2021년 7월 20일
0

codecamp

목록 보기
8/9
post-thumbnail

1. 모달창 만들기

모달창은 알람을 띄우기 위해 사용하게 된다.
주로 ant-design 이나 material-ui 사이트를 활용하여 만들게 되는데
ant 기준으로 onOk, onCancel, visible 와 같이 우리가 바꿀수 없는 값이 있기 때문에 아래 하단에 설명을 참고하며 만들어야 한다.

모달창을 활용하는 방법은 크게 두가지가 있다.

  • 단순 정보를 알려주기 위함
  • 모달창 안에서 어떤 값을 입력 받기위함

활용 목적에 따라 이 모달창을 잠시 숨겨두었다 나타나게 할것인지,
아니면 모달 자체를 삭제했다가 다시 불러올지를 결정 해야 한다.

단순히 '정상적으로 게시물이 등록되었습니다.' 와 같은 알림의 기능을 사용할때엔 visible을 사용해 ture/fales 값으로 모달창을 껏다 켜도 좋지만,
필요에 따라 아이디나 비밀번호, 주소등을 입력받아 오기위한 모달창은 isOpen함수를 모달창 앞에 사용하여 모달창 자체를 다시 그려서 사용 해야한다.

주소를 받아오기 위한 모달창의 앞에 isOpen 함수를 사용하여 ture/fales값을 state으로 전달해줌으로서 모달 자체를 지웠다가 다시 그리는 방법을 사용했다.

그 외에도 사용 목적에 따라 모달 창을 닫고 켜는 기능,버튼 등을 만들어 사용해야 한다.

그리고 이 모달창 안에선 img, coler 등 모든것이 자유롭게 스타일링이 가능하다.
하지만 앞서 말했듯 onOk, onCancel, visible 와 같이 변경이 불가한 입력 값은 아래 api 사용방법을 확인한 후 수정해야 한다.

2. 주소 및 우편번호 사용하기

https://www.npmjs.com/ 에 들어가 'react-daum-postcode' 를 검색하면 실제 daum에서 제공하는 주소,우편번호 관련 api를 사용할 수 있는데
튜터님의 증언에 의하면 국내에선 이 api가 가장 쓸만하다고 한다.

이 api를 활용하여 실제 우리가 만들고 있는 포트폴리에 추가하여 사용할껀데
이때 모달창과 함께 사용하게 된다.

우편번호 검색을 누르면 주소 검색 api가 모달의 형태로 나타나 값을 입력 받게 된다.

react-daum-postcode도 모달과 마찬가지로 변경이 불가능한/고유 api 입력값을 가지고 있는데
이또한 사이트 하단에 사용 설명서가 있으니 참고하여 사용하면 된다.

상세주소의 경우 onChange 함수를 사용하여 state로 값을 넘겨주어 서버로 전송해주면 된다.

react-daum-postcode 사용방법

3. prev

난데 없이 등장한, 완전 고결 절대 불변일것 같았던 state의 대체품이다.

state의 경우 부모의 값 자식의 어떤 요소의 선택값을 가지고 왔다면
prev의 경우 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.

당장은 코드가 그다지 길지 않아 크게 상관은 없지만
프로젝트의 크기에 따라 앞에 어떤코드를, 어떤함수를 입력했는지 바로 알 수 없는경우가 발생할 수 있다.
그렇게 되면 전혀 의도치 않은 버그의 발생을 야기할 수 있는데 이를 방지하기위해 prev를 장려 한다는 것.

다음요소를 선택 할 수 있는 next 도 있다.

유일할것 같았던 state는 뜬금없이 등장한 prev에 의해 내 코드에서 점점 지분값이 낮아질 예정이다.

생김새도 state와는 조금 다른 prev.
출력되는 값도 다르다.

상기 이미지의 함수를 실행 하였을때 state와 prev의 가장 큰 차이점은
state의 경우 덮어쓰기 형태로 가장 아래의 값을 계산하여 출력하게 되지만
prev 의 경우 함수내 이전값, 직전의 요소 전부를 가지고 있다가 반환하게 된다.

profile
prototype

0개의 댓글