[React] Zustand 라이브러리 사용해서 todo 앱 만들어보기

🤓Zustand 카운트앱 만들기 ( 이전 벨로그 )

...

👩‍💻ToDo 앱 만들어보자❗

▫ src>store>useCounterStore.js

🛒store 폴더 만들어서 useCounterStore.js 파일 만들기

import { create } from "zustand";

export const useCounterStore = create((set) => ({
  count: 1,
  inc: () => 
  	set((state) => ({
      count: state.count + 1
    }))
}))

▫ src>components>Counter.js

import React from 'react'
import { useCounterStore } from '../store/useCounterStore'

const Counter = () => {
  const { count, inc } = useCounterStore();
  
  return (
    <div>
      <p>
        {count}
      </p>
      
      <button
        onClick={inc}
      >one up</button>
    </div>
  )
}

export default Counter;

Todo를 만들거니까 store 폴더 안에 useTodoStore.js 파일 만들기

▫ src>store>useTodoStore.js

Todo 만들 때도 항상 todos = [ ]; 배열로 했었음
그리고 이걸 업데이트하는 함수들 addTodo, deleteTodo,... 이런식으로 만들었음

🎈zustand 에선 create 이용해서 만들어야함❗

➕todo 리스트 추가해주는 addTodo 만들기

create 안에서 set 으로 가져오기

저기서 필요한 게 todos 라는 애는 빈 배열[ ]로 해주고
➕todo가 하나 추가 될 때마다 호출해야되는 함수➡addTodo

set 이용한 담에 ( state 받아오고 ),
addTodo 함수 안에서 todos를 변경할건데 어떻게 변경하는걸까❓

➕{ } 하나를 추가했으니까
...state.todos( 원래 있는 리스트들 ) 뒤에다가 하나를 추가해주면 됨🙆‍♀️

#️⃣유니크한 id 값 줘야하고, ⌨'밥먹기' 입력한 값이 들어오게 text도 해줘야함
그리고 항상 todo는 첨엔 completed 안 된 상태니까 isCompleted: false ✔

1씩 올려주는 getId 함수 만들어주고

여기에 getId( ) 함수 집어넣기

text는 input( 밥먹기, 운동하기,... )에서
작성하는 게 무엇인지에 따라 이걸 작성한 담에
🖱클릭하면 이때 addTodo를 호출하는 것📢

useTodoStore 외부에서도 쓸거니까 export로 내보내기🥏

---

🗑todo 삭제하는 deleteTodo 만들기

🙅‍♀️이건 여러 개의 리스트 중에 하나를 선택해서 지울 수 있게 해주는 것

Delete 하는 거니까 filter 메소드 사용하기❗

원래 있는 state에 todos 에서
filter 메소드 이용한 담에 todo 하나의 객체에서 todo의 id랑
지우려고 하는 애의 id➡todoId를 받아올거임

🧨todo.id( 기존에 있는 id )랑 todoId( 지우려는 id )가 같지 않으면
즉, 같은 애( == )는 저절로 들어가지 않음👉 🗑삭제 되는 것❌

✅completeTodo 만들기

todo 에서 이건 다했다고 하고 complete 하게 하려면❓

로직은 어떻게 할까❓

여러 개의 todo 중에서 하나만 완성했다고 하는 거니까➡map 메소드 사용⭕

배열 안에 여러 개의 객체 중에서 하나의 객체를 잡은 담에
여기에 있는 하나의 프로퍼티 값만 바꾸기 때문🔥
( 🗺 map 메소드로 나열해서 해당 되는 애만 바꿔주는 것 )

if ( 순회하는 todo에 id와 complete한 id랑 같으면 )
🔁원래 순회하던 거에 객체에 '프로퍼티'와 '프로퍼티 값'을 다 나열➡...todo
이 중에서 얘를 complete 했다고 변경할거니까➡✅isCompleted: true

#️⃣complete한 거에 todo id는 completeTodo: ( 여기서 받아옴 )

🔁다른 애들은 원래 있던 todo 객체 값을 리턴하면 됨

---

💻UI

▫ src>components>TodoList.js

🔮rafce 해서 자동으로 함수 컴포넌트 만들기

🖱Add 버튼 눌렀을 때
form 태그에 있는 onSubmit에 등록된 함수를 호출할거니까
📢 botton의 type은 submit ✔

⌨input에 타이핑한 값은 useState 이용🧠

e( event ) 받아오고 e.preventDefault( ) 해줘야함
👉 "페이지 새로고침 방지를 위해" 😎

input 에다가 작성하고 Add 눌렀으니까 하나의 todo 추가해준거임

얘네들이 필요해서 가져와야 하는데 어떻게 가져올까❓

useTodoStore를 이용해서 가져오면 됨❗

useTodoStore( ) 이용해서 useTodoStore.js 안에 useTodoStore에 있는
todos, addTodo, deleteTodo, completeTodo 가져오면 됨🙂

➕추가를 먼저 해줘야 나열하는 게 실제로 보이니까
가져온 addTodo 이용해서 추가해주자

여기 addTodo 에서 필요했던 게 todoState 밥먹기면 밥먹기🍚

밥먹기는 todoValue에 들어있음

✔setTodoValue("")를 초기화 시켜줘야함
⌨타이핑한 거 '밥먹기' 없애버려야 하기 때문🙆‍♀️

📲이미 submit 했으니까 없애버려야함🗑

input 입력 되게 하기 ( onChange 이용해서 setTodoValue(e.target.value) )

⬇ 🤷‍♀️input에 밥먹기 입력하고 Add 버튼 누르면 어떤일이 일어났을까❓

[ ] 배열에 밥먹기가 추가 됐을 것

이제 해야할 건 추가된 걸 화면에 보이게 해야함

👀Add 버튼 누르면 리스트에 추가 된 게 화면에 보이게하기

{" "} 스페이스 하나 주기

todo.isCompleted가 🟩( false )라면 "✅" 버튼 보이고
✅( true )라면 "✅" 버튼 안 보임🙅‍♀️, "❎" 버튼은 항상 보임👀

⬇이런 식으로 보여짐 ( 체크 한 거, 지우는 거 )

v 버튼은

useTodoStore.js 안에 있는 completeTodo 부분이 필요⭕

X 버튼은 지우는 거니까

useTodoStore.js 안에 있는 deleteTodo 이부분이 필요⭕

⭐todo.id 인수로 넣어줄거면 ( ) => 이렇게 해줘야함 ( 문법적인 거라 외우셈 )

⬇v 버튼 누르면 해당 리스트에 취소선이 생기고,
X 버튼 누르면 해당 리스트가 삭제됨

🔄새로고침 하면 데이터 다 사라짐

이게 초기화 되기 때문에 데이터 사라지는 것😕

---

🔥새로고침해도 데이터 안 사라지게 로컬스토리지에 값 넣어두기

📥zustand 이용할 땐 매개 값을 계속 로컬스토리지에 넣어둘 수 있음

▫ src>store>useCounterStore.js

todo 말고 간단한 부분인 카운트를 담아보자❗

🐍persist( 지속되다 뭐 이런 뜻 ) 이걸로 이부분을 감싸주면 됨

⬇🔄새로고침 해도 똑같음🥳

이름이 undefined는 안 이쁘니까
{ name: 'counter' }로 하면 counter로 바뀌는 걸 볼 수 있음✌

todo도 카운터와 마찬가지로 persist로 감싸주고 이름 todo로 지정해주면 끝❗

⬇