to-do-list react 앱[자신감up 실습19]

뭔가 저장은 시키도록 해주고 오류도 잘 고쳤다.

 

전체적인 큰 그림을 그리는데 좀 안그려져서 걱정했는데 보다보니 적응이 된것 같아 다행이다.

 

생소한  localStorage를 처음 써서 잘 모르는 부분도 제법 있었다.

(완성과 큰 흐름 이해를 목표로 했다.)

 

localStorage란 db 없이도 따로 작게 저장할 수 있는 공간이다.  

로그인 창 만드는 프로젝트 등에서 여럿 보았는데 아주 유용했던 기억이 있다.

 

졸업작품을 만들고 있는데 jwt 관련해서는 localStorage에 저장할 경우 탈취의 위험이 있기 때문에

localStorage 사용없이 cookie를 통해서 구현할 예정이다.

 

 

---

코드 일부

unction App() {

  const [todolist, setTodoList] = useState(() => {

    const browserValue = localStorage.getItem("TASKS");

    if (browserValue == null) return [];

    return JSON.parse(browserValue);

  });

  const deleteItem = (id) => {

    const confirm = todolist.find((item) => item.id == id);

    console.log("confirm", confirm);

    if (confirm.completed == false) return;

    else {

      setTodoList((currentList) => {

        return currentList.filter((item) => item.id !== id);

      });

    }

  };

  const toggleItem = (id, completed) => {

    setTodoList((prevTodos) => {

      return prevTodos.map((item) => {

        if (item.id == id) {

          return { ...item, completed };

        }

        return item;

      });

    });

  };

  useEffect(() => {

    localStorage.setItem("TASKS", JSON.stringify(todolist));

  }, [todolist]);

  const ref = useRef();

  //To-Do-List를 새롭게 입력

  const addItem = (e) => {

    e.preventDefault();

    setTodoList([

      ...todolist,

      { id: crypto.randomUUID(), Task: ref.current.value, completed: false },

    ]);

    console.log(todolist);

    ref.current.value = null;

  };