[16일차] UI프레임워크/ 모달창 구현

0

TIL

목록 보기
18/21


모달창 만들기.

Material-ui 사이트에서

컴포넌트-> 피트백-> dialog 에 들어가면

요런게 있다. 게시물 작성 버튼을 클릭하면


이런게 나오도록 만들거임.

첫 화면에서 우측 하단 <>아이콘 클릭하면 요런게 뜬다.

이걸 사용하면 구현된다.

일단은 모달 폴더를 별도로 만들어서 모달 컴포넌트를 만들어 진행하는건 나중에 만들고, 지금은 이미 있는 게시글 쓰기 컴포넌트에 얘네들을 직접 넣어 적용해봤다.

구현하고자 하는 기능

버튼을 클릭하면 뜨는 팝업창안에 확인 버튼을 눌러야지만 다음 화면으로 넘어가도록 적용.

1. container.tsx

1. 사이트에서 확인한 이 부분을 넣는다.

2. 리턴에서 presenter로 프롭스 보내기.

보면 open은 state가 적용되있고, opentrue일때 handleClickOpen, false일때 handleClickClose가 적용되는 것 같다.

주의*
혼자 했을때는 확인버튼을 클릭해야지 다음 페이지로 넘어간다는 생각을 못했다. => router.push()부분이 팝업의 확인 버튼을 눌른 후 팝업이 꺼질 시 적용되어야한다.

3. 게시물 등록 버튼 클릭 시 팝업 창이 뜨도록 설정.

3-1.뮤테이션 muta진행 후, 팝업창이 뜨는 함수인 handleClickOpen() 이 실행.

3-2. 기존 팝업 닫힐 시 다음 페이지 이동 위해 함수안에 router.push() 넣기.

중요한 과정이 생략되있음. A, setA가 있는데,

게시물 클릭 후 다음 페이지로 동적라우팅해서 이동하는 경로는

이거를 통해 얻어지는

이 경로이다.
팝업 없이 등록 버튼 후 바로 이동을 했을 경우에는 원래

요거만 안에 넣으면 됬었는데,
저 result는 지금

이 함수 안에서만 적용되는 변수이다.

얘는 다른 함수이기 때문에 result를 여기의 router.push()에 넣을 수 없다.

그래서 setState를 사용하여,

이 과정을 통해 먼저 a에 이 경로를 넣고 함수 밖에서도 사용 가능하게 되어

여기에서 a 주소가 적용된 것.

2. Presenter.tsx


처음에는 등록 버튼에 적용해야 하나 싶었으나,
이미 우리는 컨테이너에서 등록버튼 클릭 후 오픈으로 바뀔 때 다이알로그가 적용되게끔 지정했다.
중요한 건 다이알로그 맨 위에

{props.open && (<다이알로그 내용 />)}

이렇게 오픈이 트루 펄스에 따라 바뀔 때 dialog가 적용되도록 먼저 작성을 해줘야 함.
그 외엔 자잘한 텍스트 내용 수정 및 프롭스 적용.


profile
코린이의 코딩 성장기

0개의 댓글