Redux

[React] Redux를 사용해서 간편하게 모달(modal) 구현하기

개요 modal은 사용자의 이목을 집중시키기 위한 인터페이스 창이다. 문서 내의 상위에 배치되며 사용자의 이목을 집중시키기에 좋다. 모달의 on, off는 보통 bool타입의 state로 관리하는데, 전역 상태 관리에 사용하는 라이브러리인 redux를 사용해서 모달을 구현하면 코드도 줄고, 관리가 용이할 것 같다는 생각이 들어 구현하게 되었다. 사용 라이브러리 본 글은 Redux와 bootstrap modal을 사용한다. 설치 명령어는 다음과 같다. npm i @reduxjs/toolkit bootstrap react-redux 구현 먼저 Redux가 관리할 state의 초기값을 선언한다. redux.ts const initialState = { message : "", isOpen : false, } ..