React+Typescript+Antd를 사용해서 UI를 구현하고 있는데요. 이 때 특정 차트(Gantt, Pie or Line)에 데이타를 보여주기 위해 데이타 기간과 조건들을 선택해야 합니다. 그런데, Select 콘트롤에서 선택한 Option Item들이 모달을 닫고, 다시 열면 그대로 남아있는 문제가 있습니다. 구글에 검색 해보면 대부분 setState를 사용해야 한다고 되어 있는데요. onChnage 이벤트 핸들러에서 selectedOptions를 초기화해도 State가 업데이트 되지 않습니다. 디버깅 해보면 업데이트는 되는데요. Select 콘트롤의 Value는 갱신이 되지 않습니다.

Modal의 Life-cycle에서 Component의 useEffect가 처음 한번만 수행되고, 모달을 닫고 다시 열면 호출이 안됩니다. 그래서, 아래와 같이 모달의 "destroyOnClose" 속성을 "true"로 설정해야 합니다. 그러면, 모달을 다시 띄울 때 내부의 모든 정보들이 사라지고 초기화 됩니다.

<Modal
  destroyOnClose={isDestroyOnClose}
  title={conditionTitle}
  open={isModalOpen}
  onOk={onOk}
  onCancel={onCancel}
>

이 내용을 몰라서 오전을 다 날렸네요-_-;

Antd의 Modal은 setState로 초기화가 안되니 위 내용을 참고 해보세요^^

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~