React AJAX call (비동기 작업)

💡 AJAX Client { axios, fetch }

AJAX 는 Asynchronous JavaScript and XML 의 준말로, AJAX 콜을 보낸다고 하면 비동기 요청을 보낸다고 이해할 수 있다. 비동기 요청을 보낸다함은, 외부 서버의 API에 요청하여 데이터를 불러들이는 작업을 하는 것이다. 예를 들어 youtube API를 사용해서 동영상을 불러올 수도 있고, unsplash API를 사용하여 사진을 불러올 수도 있다.

이러한 비동기 요청은 리액트가 아니라, 별도의 AJAX client 로 하여금 보내게 되는데 대표적으로 third party 라이브러리인 axios 와 대부분의 모던 브라우저에 Web API 로 깔려있는, 즉 별도의 설치없이 작업 가능한 fetch가 사용된다.

'비동기' 라는 말은, 외부 데이터를 불러들이는 동안 화면이 멈추지 않고 렌더링되며, 데이터가 다 불러와지면 화면에 데이터가 나타나게끔 하는 일이다. 이렇게 하여 화면을 끊김없이 보여줄 수 있게된다.

💡 비동기 요청이 끝나면 결과물을 어떻게 핸들링할까?

대표적인 두 가지 문법을 아래 Unsplash API 에 요청하는 예제를 통해 알아본다.

1. then 체이닝
비동기 작업이 끝나면 Promise 객체가 반환된다. 우리는 그 객체를 then 으로 받아서 then 안에 콜백함수를 작성함으로써 결과값을 핸들링한다.

  onSearchSunmit(term) {
    axios.get("https://api.unsplash.com/search/photos", {
      params: { query: term },
      headers: {
        Authorization: `Client-ID ${YOUR_API_KEY}`
      },
    }).then((response) => {
      console.log(response); 
    })
  }

2. async await
함수 이름 앞에 async 를 붙여 비동기 함수화한 뒤 axios 요청 앞에 await 을 붙여 변수에 담는다. 이 변수는 일반 객체처럼 읽어낼 수 있다.

  async onSearchSunmit(term) {
    const response = await axios.get("https://api.unsplash.com/search/photos", {
      params: { query: term },
      headers: {
        Authorization: `Client-ID ${YOUR_API_KEY}`
      },
    });

    console.log(response);
  }

💡 Each child in a list should have a unique "key" prop

리액트로 map 작업을 하며 리스트를 만들 때 만날 수 있는 경고 문구다.

어떤 기능을 막지는 않기때문에 에러는 아니지만, 리액트가 보내는 경고 문구이다. 여러 개의 리스트를 렌더링할 때 반드시 identity 역할을 할 수 있는 key 값을 부여할 것을 권장한다. 왜 key 값이 필요할까? 예를 들어 아래와 같이 할 일 목록을 만든다고 생각해보자.

이제 우리는 여기에 하나의 할 일을 더 추가하려고 한다.

여기서 리액트가 하는 일은, 새로 렌더링된 목록과 현재 DOM상의 목록을 비교하여 업데이트 된 부분만 DOM에 appendChild 하는 것이다. 바로 이 비교 작업을 할 때 key 가 필요하다. 리액트로 하여금 더욱 정확하게 리스트를 비교하게 함으로써 퍼포먼스를 돕는다.

따라서 이 key 값은 중복되지 않는 유니크한 속성을 가져야 하는데, 대개 데이터의 경우 id 속성이 이런 역할을 하고 있다. 따라서 그 id를 key 값으로 부여해주면 좋다. 아래는 key 를 설정하기 전과 후를 보여주는 예시이다.

// key 설정 전
  const images = props.images.map((image) => {
    return <img src={image.urls.regular} />;
  });

// key 설정 후
  const images = props.images.map((image) => {
    return <img key={image.id} src={image.urls.regular} />;
  });

// 주의: key 는 리스트의 최상단 엘리먼트에 부여한다. 
// 만약 img 를 감싼 li 가 있다면 아래처럼 바뀐다. 
  const images = props.images.map((image) => {
    return (
      <li key={image.id}>
      	<img src={image.urls.regular} />
      </li>
    );
  });

key 는 리액트가 자체적으로 활용하는 read only 속성이므로 개발자가 조작할 수 없다.