리액트에서 데이터베이스가 변경될 때마다 재렌더링할 수 있는 방법이 있을까요?

안녕하세요! 질문의 맥락을 보니 데이터베이스가 바뀐다기보다 데이터베이스 속에 todo 데이터가 바뀌는 상황을 말씀하시는 것 같네요. 이 페이지를 예시로 2가지 방법에 대해 설명드리겠습니다. *** A 방식 (데이터베이스 조회 요청을 자주 보내기) 1. 이 페이지를 처음 로드하면 질문자님의 질문 내용이 보여집니다. (이는 데이터베이스로 조회 요청을 한 뒤 받은 데이터를 사용하는 것이죠) 2. 질문자님이 수정 기능을 통해 질문 내용을 수정합니다. (이때 수정되어야 할 값들을 데이터베이스로 보내주면, 데이터베이스는 해당 값으로 업데이트합니다) 3. 수정이 정상적으로 완료되면, 페이지의 질문 내용이 갱신됩니다. (데이터베이스로 다시 한번 조회 요청을 해서 최신화된 데이터를 받습니다) A 예시는, 데이터에 직접적인 작업 (생성, 수정, 삭제)이 수행되면 해당 데이터를 사용하던 곳에서 다시 데이터베이스로 데이터를 요청하게끔 작업을 해주셔야 합니다. *** B 방식 (첫 조회 요청 때 전달 받은 데이터를 객체에 저장하고 객체를 계속 갱신해서 사용하기) 1. 이 페이지를 처음 로드하면 질문자님의 질문 내용이 보여집니다. (이는 데이터베이스로 조회 요청을 한 뒤 받은 데이터를 사용하는 것이죠. 이 데이터를 객체로 저장하고 페이지에서는 객체를 바라봅니다) 2. 질문자님이 수정 기능을 통해 질문 내용을 수정합니다. (이때 수정되어야 할 값들을 데이터베이스로 보내주면, 데이터베이스는 해당 값으로 업데이트합니다. 동시에 이전에 가지고 있던 데이터 객체도 수정해줍니다) 3. 수정이 정상적으로 완료되면, 페이지의 질문 내용이 갱신됩니다. (데이터베이스로 요청을 보내지 않고 수정된 데이터 객체를 계속 사용합니다. 원한다면 네트워크 요청 결과와 상관없이 수정된 데이터 객체의 내용을 보여줄 수 있습니다) B 예시는, 데이터를 불러온 후 객체에 저장한 뒤 페이지는 해당 객체를 바라보며 생성, 수정, 삭제 시에도 해당 객체를 수정해주는 방식입니다. *** A 예시는 질문자님이 생각하신 2번 방법과 유사하고 B 예시는 1번 방식과 유사합니다. 데이터베이스 상태와 웹의 상태를 일치하는 것은 생각보다 어려운 일이며 리액트 커뮤니티에서는 여러가지 방법으로 접근하고 있어요. A 방식의 라이브러리로는 react-query (tanstack-query)가 있고 B 방식의 라이브러리로는 redux, recoil, zustand 등이 있습니다. (물론 B 방식도 요즘은 추가 기능들이 생겨서 A 방식처럼 사용할 수 있습니다) B 방식처럼 리액트 앱 내에서 데이터를 지속적으로 관리해주는 방법을 상태 관리라고 합니다. 예전에는 B 방식이 좀 더 대중적이었지만 비교적 최근에 "리액트 앱이 외부에서 받아오는 데이터까지 B 방식으로 관리해야되나?" 라는 의문점을 가진 개발자분들이 A 방식을 시도했고 생각보다 괜찮은 접근 방법인 것 같아서 요즘은 A 방식도 많이 사용합니다. 현재는 A와 B 둘 중 하나를 골라야한다의 느낌은 아니고 경우에 따라 혼합해서 사용하는 느낌이에요. 리액트를 입문할 때 벨로퍼트님의 글들이 도움이 된 기억이 있어서 링크 첨부합니다. 참고해보시면 좋을 것 같아요 :) - https://react.vlpt.us/integrate-api/