18. [기능 업데이트] useSelector 없이, Store 의 값 가져오기 - 달력에서, InitialState 사용하기

달력의 Initial-State 파일인, event-initial.tsx 파일은, 리액트 컴포넌트 파일이 아니었다.

 

그러므로, useSelector 를 사용할 수 없었고,

초기 데이터를 가져올 수 없어, App.tsx 에서 값을 받아,

props 를 통해 달력에 초기 값 없이 새 값을 넣는 코드를 만들었다.

 

하지만, 생각을 잘못했다. (물론 그렇게 event 를 넣어야, 계속 업데이트 되는 사실은 맞지만...)

이번에 리덕스를 다시 공부하며, 결국 Redux 도 하나의 저장소와 다름 없고,

굳이 훅을 사용하여 값을 가져올 필요는 없다는 결론에 도달하여 검색했다.

 

그래서, 일반 자바스크립트 파일 안으로, Redux 안의 Store 값을 가져올 수 있다는 사실을 알아냈다.

 

<calendar / event_initial.tsx>

    import { EventInput } from "@fullcalendar/core";
    import { store } from "../store";		// 스토어를 가져온다

    let eventGuid = 0;
    let todayStr = new Date().toISOString().replace(/T.*$/, ""); // YYYY-MM-DD of today

    const allCalendarData = store.getState().calendar.calendarData;	// 스토어의 값을 getState() 를 통해 가져온다.
    const user = store.getState().user.user;		// 스토어의 값을 getState() 를 통해 가져온다.

    const filteredCalendar = allCalendarData.filter(
      (item) => item.email === user.userEmail
    );

    export const INITIAL_EVENTS: EventInput[] = filteredCalendar;
    export function createEventId() {
      return String(eventGuid++);
    }

 

 

그러므로, App.tsx 에서, useEffect를 사용하여, 로그인 되어있다면, Cookie 의 값을 가져와 useState 에 넣고

<App.tsx>
    import { sendRequest as sendRequestForExercise, useAppDispatch} from "./store/exercise-action";
    import { useCookies } from "react-cookie";
    import { userAction } from "./store/userData-slice";

    function App() {
        const [cookies] = useCookies(["auth-cookie"]);
        const history = useHistory();
        const dispatch = useAppDispatch();

        useEffect(() => {
            dispatch(sendRequestForExercise());
            dispatch(sendRequestForFoods());
            dispatch(sendRequestForCalendars());
            if (cookies["auth-cookie"]) {		// 쿠키가 있다면
              dispatch(
                userAction.loginedUser({ userEmail: cookies["auth-cookie"].email })	// 쿠키 값을 Store 에 저장
              );
            }
        }, [dispatch]);

 

 

event_initial.tsx 안에서 필터처리 후, 캘린더 안에 초기값으로 넣어 줄 수 있는 것이다.

< 캘린더.tsx >

import interactionPlugin from "@fullcalendar/interaction";
import { createEventId, INITIAL_EVENTS } from "./event-initial";
import { addCalendarToDb } from "../helper/calendar-add-to-DB"; // 내가 넣은 DB에 넣을 함수
				...
export default class Calendar extends React.Component<Props, {}, DemoAppState> {
  state: DemoAppState = {
    weekendsVisible: true,
    currentEvents: [],
    textid: "", // state 사용을 위한 초기화
    email: "", // state 사용을 위한 초기화
    useEmail: this.props.isLogedIn.email,
  };
    		...
    render() {
    		...
        return (
          <div className="demo-app">
            <div className="demo-app-main">
              <h1 className="demo-app-title">식단 달력</h1>
   					...
                    
                initialEvents={INITIAL_EVENTS}		// 초기 조건을 넣을 수 있게 되었다.
                events={calendarData}
                select={this.handleDateSelect}

 

초기 값을 넣음으로써 드디어 완벽한 캘린더가 완성되었다.

이제 day, week, month 의 모든 기능을 사용할 수 있게 되었다.