[react] 리액트를 이용한 프로젝트 면접 준비

해당 내용은 제가 리액트를 이용한 프론트엔드 프로젝트를 가지고 면접 준비를 할 때 정리했던 내용들 입니다.

CORS 에러

: 서버가 사용자들에게 무언가를 fetch 하는 것을 허용하지 않음

React Query

: useState, useEffect를 이용해 fetch했던 것을 ReactQuery를 이용해 코드를 줄여줌

ReactQuery 는 코드를 줄여주는 거 외에도, 캐싱을 해줌. React Query가 fetch했던 모든 걸 기억해 주기 때문. 다른 페이지를 다녀와도, 다시 fetch하는 일이 없음.

useQuery

• key - fetch 한 결과물을 기억하는 캐싱작업에 사용. array이어야 함.
• const { isLoading, data } = useQuery<IRoom[]>(["rooms"], getRooms);
  isLoding인지 상태를 보고 data를 반환. Key는 “rooms”로 이 이름 아래 캐시가 저장될 것. fetch는 api.ts의 getRooms으로 API에서 query를 가져올 것임. data의 모양은<IRooms[]>을 사용할 것임.
• data?.map…. 에서의 물음표:data 값이 undefine일 수 있어서 물음표를 붙여줌

Axios

: fetch 하는 어댑터 같은 것

: Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

: HTTP 요청과 응답을 JSON 형태로 자동 변경

javascript보다 react가 좋은 이유

: react는 이전 렌더링과 현재 렌더링을 비교해서 바뀐 부분만 업데이트 해줌

→ 매우 interactive 한 어플을 만들 수 있음