리엑트 클라이언트 와 Ajax 요청

1. Ajax 란? 

 리엑트에서 비동기적으로 처리하기 위한 기술입니다. 동기적으로 처리하면 하나의 일처리가 끝나지 않으면 다른 일을 진행하지 못해 불편하지만, 비동기적으로 처리 할 경우, A,B 두가지일은 각각 다른 시간에 일 처리를 시작해 각각 다른 시간에 일처리를 끝낼 수 있게 됩니다.

 다만, 리엑트에서는 Ajax가 없기에, fetch, axios 등의 도구를 사용해야 합니다. (fetch 보다는 axios 가 더 많이 쓰입니다.)

 

2. fetch 쓰는 법

(1) useState :  상태의 변화를 감지하여, 동적인 화면을 보여 주는 역할을 합니다. 주로 클릭이나 입력값 변경등에 사용됩니다.

(2) useEffect : 맨 처음 컴포넌트를 실행했을 때 실행되고(빈 배열 이면 이게 처음이자 마지막 실행), 그 다음 부터는 상태의 변화를 감지하여 한번만 실행되는 작업에 쓰입니다. 주로 외부 API로 데이터를 불러오기 위해 사용됩니다. 

 

이 코드에서는  useEffect 를 사용해서 Fetch(API) 를 통해 외부 데이터를 불러왔습니다. then()을 사용해서 데이터를 출력하고, catch를 통해 에러를 처리 합니다. (이때 400,500 번 에러는 잡히지 않아 직접 조건을 걸어야 합니다.)또한 직접 JSON을 연결해주어야 합니다.

 

3. axios 쓰는 법

(1) 설치 : npm install axios 를 터미널로 해줍니다.

 

(2)

 

설치된 axious 를 임포트 해주고 사용합니다. 패치 대신 get(api) 를 사용하고then 으로는 데이터를 , catch 로는 에러를 처리 합니다. (에러는 객체정보를 자동으로 알려주기에 편합니다.) json 변환은 자동으로 되기에 신경 쓸 필요 없습니다.

 

이 처럼 아약스 방식에는 크게 두가지고 있습니다. 다만, 현업에서는 대부분 편리한 axious 를 사용합니다. 그리고 아약스 방식을 사용할때는 거의 반필수적으로 useState, useEffect 랑가 쓰이기에 이 문법까지 같이 알아두면 편리합니다.