2021-07-06 :: 메뉴와 모달 만들기2

모달 만들기

workspace.tsx

팝업, 사용자 초대기능 추가

fetch한 자신의 데이터 안에 workspace에 대한 정보도 저장 해 두어, 하나로 처리한다.

import의 as, 비구조화 할당의 : 기호를 사용해 변수 이름을 사용자 지정할 수 있다.

백앤드 개발자가 전송하는 데이터에 대한 타이핑 역시 해준다.

브라우저의 dev툴에 리렌더링 시 하이라이트 여부에 대한 체크박스가 있다. 나중에 최적화할 때 참고할 자료가 된다.

워크스페이스 추가 모달; 해당 코드는 workspace 컴포넌트 안에 있다.

show props에 대항하는 isOpen state를 둔다. 데이터를 다루는 사람이 백앤드이기 때문에 데이터에 대한 권한 자체는 백앤드가 더 크다.

모달은 전체 팝업 창처럼 가운데 뜨는 페이지를 의미한다.

console.trace

이벤트 버블링이 발생했을 때 가장 상위의 onClick리스너에 stopPropogation()설정을 해주어야 한다.

input이 들어가면 컴포넌트를 분리하는 것이 좋다. input이 변할 때 전체 컴포넌트가 리렌더링이 되므로.

인풋값 validate 검사는 if(!inputData || !inputData.trim()) 코드로 공백 문자가 들어간 것도 걸러주어야 한다.

인풋값을 담아 post요청을 보낸 다음, input state는 반드시 초기화를 해주어야 한다.

에러 메시지를 아래에서 튀어나와서 처리하도록 하는 토스트

import toast from 'react-toastify'

모달 관리할 때 isOpen 토글하는 버튼 추가해준다.

children 필요 없는 FC의 타입은 VFC

invalid hook call. Hooks can only be called inside of the body of a FC;

훅은 반드시 return 문 앞에 사용한다. if, 반복 문안에 사용하면 안된다.