🫧화면 구성

📁 App.jsx

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [todos, setTodos] = useState(null);

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    fetchTodos();
  }, []);

  return (
    <>
      <div>
        {/* input 영역 */}
        <form>
          <input type="text" />
          <button>추가</button>
        </form>
      </div>

      <div>
        {/* 데이터 영역 */}
        {todos ? (
          todos.map((item) => (
            <div key={item.id}>
              {item.id} : {item.title}
            </div>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </>
  );
}

export default App;

🫧추가, 삭제, 수정 기능 구현

📁 App.jsx

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [todos, setTodos] = useState(null);
  const [inputValue, setInputValue] = useState({
    title: "",
  });
  const [targetId, setTargetId] = useState("");
  const [contents, setContents] = useState("");

  // 조회 함수
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };

  // 추가 함수
  const onSubmitHandler = async () => {
    axios.post("http://localhost:4000/todos", inputValue);
    // setTodos([...todos, inputValue]); // 화면에 id값이 바로 뜨지 않는다.
    fetchTodos(); // DB를 다시 읽어온다.
    setInputValue({ title: "" }); 
  };

  // 삭제 함수
  const onDeleteButtonClickHandler = async (id) => {
    axios.delete(`http://localhost:4000/todos/${id}`);
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };

  //수정 함수
  const onUpdateButtonClickHandler = async () => {
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
      title: contents,
    });

    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          return { ...item, title: contents };
        } else {
          return item;
        }
      })
    );
  };

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    fetchTodos();
  }, []);

  return (
    <>
      <div>
        {/* 수정 영역 */}
        <div>
          <input
            type="text"
            placeholder="수정할 아이디"
            value={targetId}
            onChange={(e) => {
              setTargetId(e.target.value);
            }}
          />
          <input
            type="text"
            placeholder="수정할 내용"
            value={contents}
            onChange={(e) => {
              setContents(e.target.value);
            }}
          />
          <button onClick={onUpdateButtonClickHandler}>수정</button>
          <br />
          <br />
          <br />
        </div>

        {/* input 영역 */}
        <form
          onSubmit={(e) => {
            e.preventDefault(); // 버튼을 눌렀을 때 새로고침을 막는다.

            // 버튼 클릭 시 , input에 들어있는 값(state)을 이용하여 DB에 저장(post요청)
            onSubmitHandler();
          }}
        >
          <input
            type="text"
            value={inputValue.title}
            onChange={(e) => {
              setInputValue({
                title: e.target.value,
              });
            }}
          />
          <button type="submit">추가</button>
        </form>
      </div>

      <div>
        {/* 데이터 영역 */}
        {todos ? (
          todos.map((item) => (
            <div key={item.id}>
              {item.id} : {item.title}
              &nbsp;&nbsp;&nbsp;
              <button onClick={() => onDeleteButtonClickHandler(item.id)}>
                삭제
              </button>
            </div>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </>
  );
}

export default App;