React - AJAX 실습(1)

간단하게 AJAX 를 통하여 무료 API 활용하여 실습을 해보자!!

일단 AJAX 는 useEffect 안에서 내부 또는 이벤트 핸들러에서 실행이 되어야 함

또한 직접 해보니 로딩이나 오류 에러 와 같은 상태 관리가 중요하다고 생각이 듬

라이브러리는 axios 나 fetch 를 사용하면 되는데 둘다 해보기로 함!

 

일단 fetch 를 통하여 API 를 받아오되 첫번째 단계로 다섯개만 뿌리고 새로운 포스트 작성을 하면 맨 위로 올라갈수 있도록 해보자!!

 

** 가장 기본 뼈대 생성

import React from "react";

const BlogPostFetch = () => {
    return(
        <></>
    )
}

export default BlogPostFetch;

 

1. 데이터를 먼저 받아서 잘 받아 왔는지 확인해보기

useEffect(() => {
        // 데이터 가져올때 비동기로 하기 위해 async!
        const fetchData = async () => {
            await fetch("https://jsonplaceholder.typicode.com/posts")
            .then(res => res.json()) //json 타입으로 변환 시켜서 응답 받기
            .then(data => console.log(data));
        }
        fetchData()
    },[]) // 빈 배열을 의존성 배열로 하면 컴포넌트 마운트 시 1회만 실행됨!

위에 코드 실행시 나오는 console 결과

 

하지만 이건 에러 처리가 없으며 상태관리하는 코드가 없기에 개선 방안을 생각해보고 추가 해보려고 함!!

 

---

 

개선방안

 

1차 개선방안

• 1-1 요청하는걸 변수 선언! 
          응답이 정상적이지 않을경우 에러 status 로 주기
• 1-2 응답이 정상적이면 데이터 파싱하는데 변수로 선언!
• 1-3 이 중 에러가 생기게 되면 console 에 error 띄우기

개선방안 적용한 코드

 useEffect(() => {
        const fetchData = async () => {
            try{
                //데이터 불러오는거 변수로 담기
                const response = await fetch("https://jsonplaceholder.typicode.com/posts");

                //응답이 정상적이지 않을 경우 에러 status 로 뱉기!
                if(!response.ok) throw new Error ("HTTP Error status : ", response.status);

                // fetch 는 데이터를 파싱해줘야함! -> 변수로
                // 데이터 파싱도 비동기가 필요할까?
                //response.json()은 Promise를 반환하는 비동기 함수
                // 실제 데이터를 얻으려면 await이 필요함!
                // await 이 들어가고 안들어가고 결과가 다름
                const data = await response.json();

                console.log("response data : ", data)
            }catch(error){
                console.error("Error : " , error);
            }
        }

        fetchData();
    },[])

 

 const data = response.json(); 일때 아래그림처럼 출력

데이터 파싱에서 비동기 함수 사용하지 않았을때

 

 const data = await response.json(); 일때 아래그림처럼 출력

데이터 파싱 비동기 함수 처리 했을때

 

 

위에 그림 두개의 차이만 봐도 비동기 처리를 하고 안하고의 결과 차이가 난다는것을 알수 있음!!

그렇다면 data 파싱에 await 이 필요한 이유는 뭘까?

• Promise 체인 특성
  fetch().then(res => res.json()).then(data => ...) 이러한 구조이기에!
• 파싱 시간 소요
  대용량 JSON 데이터일수록 파싱에 시간이 걸릴 수 있음

 

2차 개선방안

• 클린업 함수 사용

여기서 중요한건 클린업은 무엇이며 왜 필요한걸까??

 

일단 클린업 함수는 컴포넌트가 화면에서 제거되기전 즉 언마운트 되기전 불필요한 작업을 정리하기 위해 사용!

즉 컴포넌트가 사라질때 청소하는 도구임

 

그렇다면 왜 ??

만약 위와같이 데이터 요청중에 사용자가 페이지를 벗어나는 경우

타이머 실행중 컴포넌트가 사라지는 경우 등 

처리를 따로 하주지 않으면 메모리 누수가 발생할수 있으며 사라진 컴포넌트의 상태를 업데이트 하려고 시도를 하고있다면 에러가 발생할수 있으며 불필요한 네크워크 요청이 지속되고 있을수 있기에 필요함!!

 

클린업 함수의 핵심 동작

• 컴포넌트 마운트 → useEffect 실행
• 컴포넌트 언마운트 → 클린업 함수 실행
• 의존성 배열 변경 → 이전 클린업 실행 후 새 효과 적용

즉 컴포넌트 언마운트 시 필요한 정리 작업을 수행할 수 있도록 추가해주는것이 좋음!

return () => { ... };

클린업 함수 기본 코드

 

 useEffect(() => {
        const fetchData = async () => {
            try{
                //데이터 불러오는거 변수로 담기
                const response = await fetch("https://jsonplaceholder.typicode.com/posts");

                //응답이 정상적이지 않을 경우 에러 status 로 뱉기!
                if(!response.ok) throw new Error ("HTTP Error status : ", response.status);

                // fetch 는 데이터를 파싱해줘야함! -> 변수로
                // 데이터 파싱도 비동기가 필요할까?
                //response.json()은 Promise를 반환하는 비동기 함수
                // 실제 데이터를 얻으려면 await이 필요함!
                // await 이 들어가고 안들어가고 결과가 다름
                const data = await response.json();

                console.log("response data : ", data)
            }catch(error){
                console.error("Error : " , error);
            }
        }

        fetchData();
        
        //클린업 함수 추가
        return () => {
       		console.log('Component unmounted, cleanup...');
    	};
    },[])

클린업 함수 추가 코드

 

다음엔 post 할때의 fetch 코드와 실제 화면에 보여지는 실습을 해보자!