TIL (2/28)

1. axios

npm i axios -g
import axios from 'axios';

axios의 좋은점?

• fetch 보다 더 간결하다.
• response 객체의 data property에 접근함으로서 데이터를 받음
• json 자동 변환
• 요청을 중도 취소하거나 응답시간 초과 설정등의 기능이 있음
• 400, 500 대의 error 발생시 reject로 response를 전달해 catch로 잡아낼 수 있다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [data, setData] = useState({ hits: [] });
 

useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
 
    setData(result.data);
  }, []); 
 
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
 
export default App;`

useEffect 내에서는 함수를 반환하지 않아야 한다

그렇기 때문에

  useEffect ( ( ) => {  
    const fetchData = async ( ) => {      
      CONST 결과 = AWAIT Axios의 (  
        'https://hn.algolia.com/api/v1/search?query=redux' ,
      ) ;
 
      setData ( 결과 . 데이터 ) ;
    } ;
 
    fetchData ( ) ;
  } , [ ] ) ; 

이런 형태로 바꾸어 주어야된다.

2. Promise의 3가지 상태

pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태
Fullfilled (이행) - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

3. 쿼리스트링을 이용한 다양한 기능

쿼리스트링을 이용해서 인풋창에 입력한 값을 state에 저장해주고

onChange={event => setQuery(event.target.value)}

해당 state를 쿼리스트링으로 넘겨주면 검색한 결과를 쿼리스트링을 통해 데이터를 넘겨받을 수 있다..!