Dorothy_YANG
With Dorothy
Dorothy_YANG
전체 방문자
오늘
어제
  • 분류 전체보기 (279)
    • Hi, I'm Dorothy 🕵️‍♂️ (21)
      • Slowly but Surely (18)
      • IT certifications (3)
    • 🤯TIL (80)
      • HTML & CSS (2)
      • Javascript & jQuery (13)
      • React (13)
      • C언어 (1)
      • JAVA (22)
      • Python (2)
      • Oracle SQL (10)
      • My SQL (5)
      • Spring (12)
    • 💻Programmers (17)
    • 🏫 Open API_JAVA (101)
    • 🌎 Project (10)
      • Shopping (10)
    • 💥 Error (24)
    • ⚙ Setting (23)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 콜라보레이토리
  • spring
  • 비쥬얼스튜디오코드
  • 파이썬온라인
  • 독학후기
  • java
  • Database
  • oracle
  • 기간쿼리
  • 코딩앙마
  • AllArgsConstructor
  • HTML
  • 시작일종료일
  • 연습문제
  • Javascript
  • CSS
  • 오류해결
  • colaboratory
  • 기간설정
  • SQLD합격
  • SQLD합격후기
  • 이것이자바다
  • 노마드코더
  • 서버등록
  • googlecolaboratory
  • Eclipse
  • 창초기화
  • sql기간
  • SQL
  • 백준

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Dorothy_YANG

With Dorothy

🤯TIL/React

[React] async와 await를 사용한 CRUD

2023. 11. 30. 00:24
728x90

1. Create (C) - 비동기적으로 데이터 생성 POST

// 예시: Axios를 사용한 POST 요청
const createData = async (data) => {
  try {
    const response = await axios.post('/api/data', data);
    console.log(response.data); // 생성된 데이터 확인
  } catch (error) {
    console.error('Error creating data:', error);
  }
};

2. Read (R) - 비동기적으로 데이터 조회 GET

// 초기 데이터 로딩
const fetchInitialData = async () => {
  try {
    const response = await axios.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching initial data:', error);
  }
};

// 조회 조건에 따른 데이터 로딩
const fetchDataWithConditions = async (condition1, condition2, condition3) => {
  try {
    const response = await axios.get('/api/data/query', {
      params: {
        condition1,
        condition2,
        condition3,
      },
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data with conditions:', error);
  }
};

 


3. Update (U) - 비동기적으로 데이터 업데이트 PUT

// 예시: Axios를 사용한 PUT 요청
const updateData = async (id, updatedData) => {
  try {
    const response = await axios.put(`/api/data/${id}`, updatedData);
    console.log(response.data); // 업데이트된 데이터 확인
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

 


4. Delete (D) - 비동기적으로 데이터 삭제

// 예시: Axios를 사용한 DELETE 요청
const deleteData = async (id) => {
  try {
    const response = await axios.delete(`/api/data/${id}`);
    console.log(response.data); // 삭제된 데이터 확인
  } catch (error) {
    console.error('Error deleting data:', error);
  }
};

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'🤯TIL > React' 카테고리의 다른 글

[한입 크기로 잘라 먹는 리액트] simpleDiary 코드  (1) 2023.11.19
[한입 크기로 잘라 먹는 리액트] React에서 API 호출하기  (0) 2023.11.19
[한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect  (1) 2023.11.19
[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기  (1) 2023.11.19
[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 3 - 데이터 삭제하기  (0) 2023.11.19
    '🤯TIL/React' 카테고리의 다른 글
    • [한입 크기로 잘라 먹는 리액트] simpleDiary 코드
    • [한입 크기로 잘라 먹는 리액트] React에서 API 호출하기
    • [한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect
    • [한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기
    Dorothy_YANG
    Dorothy_YANG
    Slowly but Surely, 비전공 문과생의 개발공부

    티스토리툴바