2023.09.06 스크럼 - 라우터 주소 있는 곳,,,

비동기 처리

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Query와 함께 선언적 UI를 구성하는 방법

https://tech.kakaopay.com/post/react-query-1/

Web: React Query 알아보기(등장 배경, 장점, 기초 개념)

React Query의 등장 배경과 Query Client, useQuery, useMutation 등에 대해 알아보자

https://medium.com/hcleedev/web-react-query-알아보기-등장-배경-장점-기초-개념-e82a3733036c

const {data: userList, isLoading} = useQuery(
  'UserListQueryKey', 
  fetchPost(..),
  {}
);

1. React-query 사용해서 useQuery 훅 호출 시 콜백으로 axios 인스턴스 감싼 함수 넣어주기
인스턴스는 요청에 뭘 넣어 보내는가에 따라서 생성해주기
• fetchPost
• fetchUser
• fetchNotification
• …

const dataToSend = {
  key1: 'value1',
  key2: 'value2'
};

instance.post('/some-endpoint',dataToSend)
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  })



axios.post('https://some-domain.com/api/some-endpoint', {
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'},
	data: dataToSend
}).then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  })

axios instance - (baseurl, headers)

 

fetchPost({ option: ‘create’ , id: …})
// option : 'create' | 'read' | 'update' | 'delete'
// update 없음....

url ⇒ post/${option}/${id}

1. API HOOK

const api = axios.create({
  baseURL: 'https://kdt.frontend.3rd.programmers.co.kr:5001',
});

const data = await instance.get …

return data;

// Main => <Route path=’/search/*’ element={<Search/>} />


const Search = ({keyword, sort}) => {
	useEffect ... () ⇒ route.navigate(’/post’)}
	return (
	<Routes>
		<Route path=’/post’ element={<PostList keyword={} sort={}/>} />
	  <Route path=’/user’ element={<UserList keyword={} sort={}/> />
	</Routes>)
	
}

2. 라우터 주소

// useBlock.ts
// location: 뒤로가기 막을 페이지 location
const useBlock = (location: Location | Pathname) => {
const history = useHistory()
  
  useEffect(() => {
    const unlisten = history.listen((_, action) => {
      // 리스너 해제
      unlisten() 
      
      // 뒤로가기 시 동작
      if (action === 'POP') {
        history.push(location) 
      }
    })
  }, [history, location])
}
export default useBlock