to-do 웹과 DB 연동에 대한 고민

DB없이 to do를 추가하고 삭제하는 것은 성공해서, DB 연동을 시작했다.
DB 연동은 https://artistjay.tistory.com/27 이 블로그를 참고했다.

expressJS를 사용해서 서버도 만들고, axios.get으로 DB를 불러오는 것도 성공했다.
그런데 이제 나의 고민은 to do가 갱신되어야 할 때 어떻게 해야하느냐 이다.

DB에 저장되어 있는 to do는 App.js에서 아래와 같이 불러와진다.

  // todo 배열
  const [todos, setTodos] = useState({
    todoList: [],
  });

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios.get("http://localhost:8000/list", {});
      setTodos((todo) => (todo.todoList = data));
    }
    fetchData();
  }, []);

만약 to do가 추가된다던가, 삭제된다던가 하는 상황에서 to do는 자동으로 업데이트되지 않는다.
몇 가지 방안을 생각해보았다.

1. to do에 변화가 생길 때마다 get을 해주는 방법
   • put + get, push + get, delete + get 처럼 DB에 변화가 생길 때마다 갱신도 함께 해주는 방법
   • 장점: 항상 DB와 상태가 같음
   • 단점: 어쩌면 비효율적...?
2. to do를 처음에만 불러오고, 나중에(창을 닫을 때) 한꺼번에 저장하는 방법
   • 처음 켰을 때 to do를 불러오고, 변화가 생기더라도 DB로 보내지 않고, 창을 닫을 때 등 특정 상황에 to do list를 DB에 저장하는 방법
   • 장점: get을 많이 사용하지 않아도 됨
   • 단점: 인터넷이 끊어진 채로 창이 닫히면 DB에 저장이 안 될 것 같음, 효율적이라고 단정 짓지 못함. 창을 닫을 때 이 방법을 사용할 수 있을지 확실하지 않음
3. to do에 변화가 생길 때 DB와 state를 별개로 작업하는 방법
   • get으로 계속 갱신해주는 것이 아니라 state는 state대로, DB는 DB대로 따로 작업하는 방법
   • 장점: 항상 DB와 상태가 같음, DB와의 통신이 1번보다 줄어듦
   • 단점: 어쩌면 비효율적...?

나는 3번을 선택하기로 했다. 1번은 DB와의 통신이 많고, 2번은 단점에 적은 것처럼 인터넷이 끊어졌을 때와 같은 돌발상황에는 내가 원하는 방식대로 작동하지 않을 것 같기 때문이다.
이게 맞는 방법인지는 모르겠지만, 일단 내가 가진 지식으로는 여기까지밖에 생각하지 못 했다. 더 좋은 방법을 떠올리거나 찾게 된다면 수정하면 되지! 😊