React 기술면접 4주차(2)

HTTP 프로토콜

브라우저 - 서버 간
HTML 문서뿐 아니라 동영상, 이미지 등 전송 가능

1. 비연결성 : 한 번 통신으로 단절. 쿠키, 세션 등을 이용해 연결 유지하는 것이 가능하다.
2. 무상태성 : 이전 상태를 기억하지 않는다. 쿠키, 상태로 상태 유지할 수 있다.
응

• 응답
  • 상태라인 : 200 같은 응답 코드
  • 헤더 : 메타 데이터
  • 바디 : 실제 데이터
• 요청
  • 요청라인 : GET, PUT 같은 Method
  • 헤더
  • 바디 : 없을 때도 있다

---

조건문 안 hook 실행

리액트가 훅을 순서대로 실행하기 때문에, 상태 관리 로직이 꼬이지 않게 하고
의존성 배열 변경으로 인한 문제를 방지하기 위해 훅은 항상 최상단에 위치시킨다.

useEffect안에 if문을 사용할 수는 있으나
반대로 if문 안에 useEffect를 넣어 조건에 따라 훅은 실행을 결정짓는 것은 안 된다.

• if문 : 값으로 쓸 수 없음
• 삼항연산자 : 값으로 쓸 수 있음

const value = condition ? useMemo(() => {}) : null

삼항연산자 안에 훅을 실행시킨 값은 들어갈 수 있다.

---

Axios vs Fetch

Axios

장점

• Instance, Interceptor로 효율적인 요청, 응답 처리 가능
  • Axios Instance : BASE_URL 같은 공통 설정을 미리해두고, 슬래시/로 쓰면, 인스턴스가 자동으로 BASE_URL을 앞에 합친다.
    Axios InterCeptor : 중간에 들어갈 로직 처리

단점

• 취소기능이 존재하지만 아이러니하게도 메커니즘이 복잡해
  fetch에서 따로 만들어서 쓰는 abort controller가 더 직관적이다.
• fetch에 이미 존재하는 기능들을 중첩한다.

Fetch

장점

• 간단한 브라우저 내장 메서드
• Next.js에서 자체적으로 fetch의 기능을 확장시키고 추가하여 사용을 권장한다.

단점

1. 에러처리

• 네트워크 에러만 Promise를 reject 처리함
• 에러 응답코드(404 등)의 경우 (!reponse.ok)로 코딩해 따로 처리해야 한다.

2. 취소기능 부재
abort controller를 따로 만들어 사용해야 한다.

---

useQuery

비동기 데이터를 불러오고 캐싱한다.

• queryKey : 배열 형태, 쿼리 식별자로 저장된 키를 이용해 데이터 캐싱
• isPending, isError : boolean 값

useMutation

결과값이 함수?
onSuccess에 콜백함수로.
~~~mutation.mutate()

TanstackQuery 로직을 커스텀훅에 캡슐화해서 사용할 수 있다. e.g)useUser

---