[멋쟁이사자] 백엔드 - 44일차 회고록

44일차

학습목표

1. useEffect 훅을 사용하여 컴포넌트 생명주기에 맞는 동작을 구현할 수 있다.
2. Axios를 통해 외부 API로부터 데이터를 리턴받고 API 호출에 따른 로딩/에러 상태를 관리할 수 있다.
3. React에서 Axios를 통해 Node.js API 서버와 통신할 수 있으며 목적에 따른 글 생성, 조회, 수정, 삭제 기능을 통합하여 CRUD 을 완성할 수 있다.
4. 각 기능을 컴포넌트로 나누고 상태를 효율적으로 관리할 수 있다.

useEffect

리액트는 컴포넌트 단위로 동작한다.

때문에 컴포넌트들의 생명주기에 맞는 동작을 개별로 설정해줘야 비동기 통신을 문제없이 동작시킬 수 있다.

이를 위한 훅이 바로 useEffect다.

useEffect의 경우 useState와 같이 사용하는 경우가 종종 있다.

useEffect는 블로그 글에 정리해뒀고, useState도 필요하면 참고하면 될것같다.

Axios

JS만으로 HTTP와 통신하는 CRUD를 구현하기에는 매우 번거롭고 어렵다.

때문에, 이를 도와주는 라이브러리인 Axios는 REST API에서 자주 사용된다.

이번 학습에선 Axios를 통해 간단한 CRUD하는것을 학습했다.

Axios는 블로그 글에 정리해뒀다.

총평

어제 학습한 useState와 useEffect를 Axios 라이브러리를 통해 CRUD하는 방법에 대해 학습했다.

CRUD의 경우 어딜가든 웹의 기본이기 때문에, 알아두면 여기저기 쓸모있어 보인다.

프론트의 경우에도 어떤 방식으로 통신하는지 알아둬야 추후 백엔드 코드를 작성할때 유리하지 않을까싶다.