TIL 8주 2일차

(전역) 상태 관리 라이브러리

redux

middleware

- redux-saga

- redux-thunk

- redux observable 

 

서버 상태 관리 라이브러리

 

- react query

 

react-query로 ajax 요청하는 법

 

그냥 ajax 요청해도 되는데 

react-query를 써서 ajax 요청을 날리면 더 편리한 기능을 제공합니다. 

 

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )
}

useQuery 라는걸 상단에서 import 해온 뒤에 

useQuery()로 ajax 요청을 감싸면 됩니다.

 

장점1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있습니다. 

function App(){ let result = useQuery('작명', ()=> axios.get('https://codingapple1.github.io/userdata.json') .then((a)=>{ return a.data }) ) return ( <div> { result.isLoading && '로딩중' } { result.error && '에러남' } { result.data && result.data.name } </div> ) }

 

result라는 변수에 ajax 현재 상태가 알아서 저장됩니다.

- ajax요청이 로딩중일 땐 result.isLoading 이 true가 됩니다. 

- ajax요청이 실패시엔 result.error 가 true가 됩니다. 

- ajax요청이 성공시엔 result.data 안에 데이터가 들어옵니다.

 

그래서

ajax 로딩중일 땐 <A/> 보여주세요~

ajax 성공시엔 <B/> 보여주세요~

이런거 직접 개발하려면 state 부터 만들어야 했을텐데 얘는 그럴 필요가 없습니다.

 

장점2. 틈만나면 알아서 ajax 재요청해줍니다. 

 

페이지 체류하고나서 일정시간이 경과하거나 

님들이 다른 창으로 갔다가 다시 페이지로 돌아오거나 

다시 메인페이지로 돌아가거나 

이런 여러 경우에 알아서 ajax 요청을 다시 해줍니다. 

당연히 재요청 끄는 법, 재요청간격 조절하는 법도 있습니다. 

 

 

 

 

 

 

장점3. 실패시 재시도 알아서 해줌 

 

잠깐 인터넷이 끊겼거나 서버가 죽었거나 그러면 ajax 요청이 실패합니다.

실패했을 때는 얘가 4번인가 5번인가 재시도를 알아서 해줍니다. 

편리합니다. 

 

 

 

 

 

 

 

장점4. ajax로 가져온 결과는 state 공유 필요없음 

 

지금 App 컴포넌트에서 유저이름 가져오는 ajax 요청을 날리고 있습니다. 

근데 그 유저이름 결과가 Detail 컴포넌트에도 필요하면 어쩌죠?

- 유저이름을 props 전송하면 됩니다. 

 

근데 실은 props 전송 필요없습니다.

Detail 컴포넌트에다가 유저이름 ajax 요청하는 코드 똑같이 또 적으면 됩니다.

react-query는 스마트하기 때문에 ajax 요청이 2개나 있으면 1개만 날려주고

캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씁니다. 

 

 

 

 

 

react-query가 주장하는 장점은 

server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다고 합니다.

근데 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 좀 비효율적일 수도 있습니다. 

실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent events 같은 가벼운 방식들도 있습니다. 

그래서 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 더 있습니다.