오늘 공부 계획 및 공부한 내용📝
- 개인 프로젝트 시작하기
- api 호출 함수 뜯어보기(useQuery훅)
Axios get : 서버의 데이터를 조회할 때 사용
*Axios를 사용해서 GET 요청하기 전 어떤 방식으로 요청 해야 할 지는 API 명세서를 확인해야 함.
getNotes 함수는 서버에서 모든 노트 데이터 가져옴.
axios.get 함수를 사용해 ${process.env.REACT_APP_SERVER_URL}/notes로 HTTP GET 요청 보냄.
${process.env.REACT_APP_SERVER_URL}은 환경 변수로 설정된 서버의 URL을 나타냄.
await 사용해 서버로부터의 응답을 기다리고, 응답 데이터인 response.data 반환.
getNote 함수는 특정 노트의 데이터를 가져옴. => 게시글 상세 페이지에서 쓰임
함수의 매개변수로 id를 전달받아
${process.env.REACT_APP_SERVER_URL}/notes/${id}로 HTTP GET 요청 보냄.
${id}는 특정 게시글의 식별자.
await 사용해 서버로부터의 응답을 기다리고, 응답 데이터인 response.data 반환.
서버에 GET요청으로 조회한 데이터 그려줄 '메인페이지'
const {isLoading, isError, data} = useQuery("notes', getNotes)React Query는 캐시 기능을 제공해 이전에 가져온 데이터를 저장하고 재사용할 수 있는데
useQuery 훅을 사용해 데이터를 가져올 수 있음.
1) useQuery 훅을 사용해 데이터를 가져오는 비동기 함수인 getNotes 실행.
첫 번째 매개변수로 쿼리 식별자 전달. 일반적으로 고유한 문자열이나 키로 사용되며, 쿼리를 식별하는 데 사용함. 쉽게 "쿼리 키"라고도 불림.
==>
즉, "notes"는 노트 데이터를 가져오는 쿼리를 나타내는 식별자.
useQuery가 "notes"라는 식별자를 가진 쿼리가 있는지 먼저 확인하고 그 상태를 관리하며, getNotes 함수를 사용해 해당 쿼리의 데이터를 가져옴.
2) useQuery 훅은 isLoading, isError, data를 반환값으로 받아옴.
isLoading은 데이터 로딩 상태, isError는 오류 발생 여부, data는 API 요청 결과로 받아온 데이터를 나타냄. 이 상태에 따라 ui 보여짐.
useEffect 훅을 사용하여 컴포넌트가 마운트되었을 때 실행할 코드 정의.
빈 의존성 배열([])을 둬 마운트 시에만 한 번 실행되도록 설정.
userCheck라는 비동기 함수 정의. 이 함수는 authorizationUser 함수를 호출해 사용자 인증을 확인하고, 오류가 발생하면 오류 메시지를 콘솔에 출력하고 "/login" 경로로 이동함.
userCheck 함수를 실행하여 사용자 인증을 확인합니다.
==>
이 훅을 넣은 이유는 메인 페이지에 오자마자 로그인된 유저만 페이지를 볼 수 있도록 하기 위함. 로그인이 되지 않은 유저는 "/login" 페이지로 이동.
