일상의 기록/🌷DAILY 회고록 : 코드스테이츠

[230403] Ajax , Axios, Fetch 데이터 통신하기

감귤밭호지차 2023. 4. 4. 10:10

AJAX , AXIOS, FETCH

  • React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
  • 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
  • State 끌어올리기의 개념을 이해할 수 있다.
    • 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

Chapter2. State 끌어올리기 (Lifiting State Up)

  • Side effect가 어떤 의미인지 알 수 있다.
  • React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
    • Side effect의 예를 들 수 있다.
  • Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
  • Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
  • 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

자기주도적 학습 가이드

이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.

  • 오늘 학습이 어려웠다면
    • 개념학습 다시 보기
    • 연습문제 문제 다시 풀어보기
    • 이해되지 않는 개념 아고라스테이츠에 질문하기
  • 오늘 학습이 수월했다면
    • React 데이터 흐름에 대한 주요 개념 블로그에 정리하기
    • 이해되지 않는 개념 아고라스테이츠에 질문하기
  • 추가적인 학습을 하고 싶다면
    • 래 키워드는 React와 관련된 심화 링하거나 React 공식 문서를 통해 공부한 후, TIL을 작성해 보세요.
    • State와 생명주기(Life-cycle)
    • React Hook
      • Hook의 규칙
      • Hooks API Reference
    • 클래스형 컴포넌트(Class Components)
 

AJAX / AXIOS / FETCH 차이점 

래 키워드는 React와 관련된 심화