next+ts17일차 update 페이지

유튜브:https://www.youtube.com/watch?v=349WiH4V1XE 
깃허브:https://github.com/qjawns0222/caremaker/tree/next+ts-17%EC%9D%BC%EC%B0%A8 

오늘은 update페이지를 만들었습니다.

일단 firstform/index 기준으로 다 복붙하고 변한 부분 위주로 설명하겠습니다.

이런식으로 페이지 구성해주세요

import { useRouter } from "next/router";

import { useEffect, useRef, useState } from "react";

import { useDispatch } from "react-redux";

import { useSelector } from "react-redux";

import Modify from "../../../../components/form/firstform/update/[id]";

import { dataupdate } from "../../../../store/actions/action";

import { CounterState, RootState } from "../../../../store/types/state";

import { da } from "../../../../type";

const ModifyContainer = () => {

  const dispatch = useDispatch();

  const { main }: { main: CounterState } = useSelector(

    (state: RootState) => state

  );

  const { query } = useRouter();

  const id: String | string[] | undefined = query.id;

  useEffect(() => {

    main.data.find((res) => {

      if (res.idx == id) {

        titleref.current!.value = res.text.title;

        dateref.current!.value = res.text.date;

        timeref.current!.value = res.text.time;

        addressref.current!.value = res.text.address;

        contentref.current!.value = res.text.content;

        tagsref.current!.value = "#" + res.text.tags?.join("#");

        return res;

      }

    });

  }, [main.data, id]);

  const titleref = useRef<HTMLInputElement>(null);

  const dateref = useRef<HTMLInputElement>(null);

  const timeref = useRef<HTMLInputElement>(null);

  const addressref = useRef<HTMLInputElement>(null);

  const contentref = useRef<HTMLTextAreaElement>(null);

  const tagsref = useRef<HTMLInputElement>(null);

  const reset: () => void = () => {

    titleref.current!.value = "";

    dateref.current!.value = "";

    timeref.current!.value = "";

    addressref.current!.value = "";

    contentref.current!.value = "";

    tagsref.current!.value = "";

  };

  const finish: () => void = () => {

    console.log(main.data);

    const data: da | undefined = makedata();

    if (data != undefined) {

      dispatch(dataupdate(data));

      if (main.common.login == "admin") {

        alert(`id를 기억하세요 id:${id}`);

      }

    } else {

      alert("태그 제외 모든 빈칸을 넣어주세요");

    }

  };

  const makedata = () => {

    if (

      titleref.current?.value &&

      dateref.current?.value &&

      timeref.current?.value &&

      addressref.current?.value &&

      contentref.current?.value

    ) {

      const tagarr: string[] | undefined = tagsref.current?.value.split("#");

      tagarr?.splice(0, 1);

      const data: da = {

        idx: query.id!.toString(),

        currentform: "first",

        maker: main.common.login,

        text: {

          address: addressref.current?.value,

          content: contentref.current?.value,

          date: dateref.current?.value,

          tags: tagarr,

          time: timeref.current?.value,

          title: titleref.current?.value,

        },

      };

      return data;

    }

  };

  return (

    <div>

      <Modify

        main={main}

        titleref={titleref}

        dateref={dateref}

        timeref={timeref}

        addressref={addressref}

        contentref={contentref}

        tagsref={tagsref}

        finish={finish}

        reset={reset}

        id={id}

      />

    </div>

  );

};

export default ModifyContainer;

useeffect를 이용해서 ref부분에 데이터를 넣어줘서 defafult값을 설정해줬습니다.

tag는 join으로 사이에 #넣어주고  젤처음에 #을추가해주는걸로 처리했습니다.

makedata에 idx부분을 적절한 idx로 변경해주었습니다.

이제 redux부분으로 넘어가면

 

as로 타입 캐스팅을 해줘야지 제대로 됩니다. 저기 들어갈수있는 type이 여러가지라서 어떤 타입인지 인식을 못하기 때문에 설정해주어야 됩니다.

즉 저렇게 고쳐주고 state를 반환시키면 제대로 동작이 됩니다.

내일은 마지막으로 만든 update를 버튼에 연결시켜 보겠습니다.