next+ts13일차 ref를 이용한 데이터 삽입

container/form/firstform/index.tsx

import { useRef } from "react";

import { useSelector } from "react-redux";

import { useDispatch } from "react-redux";

import Index from "../../../components/form/firstform/index";

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

import { RootState } from "../../../store/reducers";

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

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

const FirstindexContainer = () => {

  const dispatch = useDispatch();

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

    (state: RootState) => state

  );

  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(dataadd(data));

      reset();

    } 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: (main.data.length + 1).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>

      <Index

        titleref={titleref}

        dateref={dateref}

        timeref={timeref}

        addressref={addressref}

        contentref={contentref}

        tagsref={tagsref}

        finish={finish}

        reset={reset}

      />

    </div>

  );

};

export default FirstindexContainer;

component/form/firstform/index.tsx

우선 ref를 보면const titleref = useRef<HTMLInputElement>(null); 이렇게 사용 됬습니다.

우선 ref는 타입을 String 이렇게 지정하는게 아니라 어떤요소에 넣을건지 지정해줘야됩니다.

즉 titleref.current.value 이런식으로 접근하므로 값을 타입이아니라고 ref.current의 타입을 넣어워야되므로 저런식으로 넣어 줘야됩니다.

MutableRefObject와 RefObject 이두개의 리턴 타입이 있는데  MutableRefObject 는 null이 못들어 갑니다.

RefObject 는 null이 드갈수 있습니다.

그 중에서 RefObject를 쓴이유는  처음에는 어떤 데이터에 넣어줄지 모르기 때문에 null을 넣고 데이터를 전송하기 때문에 RefObject를 사용하게됩니다.

 

그리고 변수로 함수를 전달할때는 ()=>이런식으로 타입을 지정해줄수 있습니다.

그리고 split는 문장을 해당 문자 기준으로 나눠서 배열로 바꺼주는 거입니다

splice는 해당 인덱스기준으로 배열을 나누어 주게 됩니다.

그리고 dispatch를 활용해서 redux action을 실행시켜주게 됩니다.

action 안에 type 과 payload를 넘겨주고

 

이렇게 ...을 사용해서 state를 수정해주게 합니다.