My-world 개발 보고서 : Redux Persist, useRef로 input 상태 업데이트

Redux Persist

설치 명령어

$ npm i redux-persist @types/redux-persist

사용법

redux에 저장된 내용을 local storage 또는 session storage에 저장하도록 돕는 라이브러리. 이 프로젝트에서는 todo list가 영구적으로 보관될 수 있도록 local storage를 사용함.

session storage를 사용하고 싶으면 import해오는 부분만 바꿔주면 됨.

import storage from "redux-persist/lib/storage/session";

modules/index.ts

index.ts

useRef로 input 다루기

useState로 input의 상태를 업데이트하면 불필요한 렌더링이 발생함.
useRef 또는 form data를 이용하면 값이 바뀌지만 렌더링은 하지 않도록 만들 수 있음.

import { useRef } from "react";

type InputTodoProps = {
  add: (text: string) => void;
};
export const InputTodo = ({ add }: InputTodoProps) => {
  const inputRef = useRef<HTMLInputElement>(null);
  //이벤트의 타입은 해당 함수를 hover하면 ts가 알려줌

  const saveTodo = () => {
    if (inputRef.current !== null) add(inputRef.current.value);
    if (inputRef.current) {
    //내용이 입력되고 버튼이 클릭되었다면 input 입력 내용 초기화
      inputRef.current.value = "";
    }
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>//엔터키 허용
      <input ref={inputRef} />
      //input DOM element를 ref로 받아서, 버튼을 클릭하면 input의 value를 직접 빈 문자열로 수정
      <button onClick={saveTodo}>저장</button>
	  //버튼 클릭 시 redux에 todo상태를 업데이트함
    </form>
  );
};

참고

redux persist
useRef로 input 다루기
react ts의 event handle