1. Udemy(1)

useCallback

• useMemo가 특정 값을 재사용하기 위함이라면, useCallback은 특정 함수를 재사용하기 위함이다
• useMemo와 마찬가지로 두번째 인자로 의존값을 가진다 (검사할 특정 값을 담은 배열)
• 만약 자식컴포넌트가 React.memo() 같은 것으로 최적화 되어 있고 그 자식컴포넌트에게 함수를 props로 넘길 때 컴포넌트에서 useCallback 으로 함수를 선언하는 것이 유용하다 (자식 리렌더링 방지)

++ Memo에 대해서 알아보기

---

fetch

• let promise = fetch(url, {options})
• fetch는 promise를 반환한다
• 단순히 데이터를 가져오는 것이 아니라 동일한 기능을 사용하여 데이터를 보낼수도 있다
• 두번째 인자 옵션을 사용해 다른 여러 세팅을 컨트롤 할 수 있다
• 옵션중 메소드키를 'POST'로 설정하여 데이터를 보낼 수 있다 (default : GET)
• ok 프로퍼티를 이용하여 fetch의 성공 여부를 체크할수 있다
  • HTTP 상태 코드가 200과 299 사이일 경우 true

HTTP 상태 코드

• 2xx번대 : 서버가 클라이언트의 요청을 성공적으로 처리했다는 의미
• 4XX번대 : 클라이언트의 요청이 유효하지 않아 서버가 해당 요청을 수행하지 않았다는 의미
• 5XX번대 : 서버 오류로 인해 요청을 수행할 수 없다는 의미

// async와 await를 사용하여 위의 함수를 아래와 같이 만들 수 있다
function 함수() {
  fetch('url')
    .then(response => response.json())  // 응답을 JSON 형태로 파싱
    .then(data => {})
}

// async, await 사용
async function 함수() {
  const response = await fetch('url');
  const data = await response.json();
}

---

예외처리

일반적인 상황(try...catch)

• 에러가 발생할 수 있는 부분을 try 함수내에 넣고 try 내부에 에러가 발생하면 그 에러를 어떻게 처리할 것인지 catch 부분에 작성한다

비동기상황(.catch)

• 비동기상황에서 예외처리는 예외가 발생하는 시점과 try가 싸고 있는 시간이 일치하지 않아 try...catch 로 에러를 잡을 수 없다
• 하지만 async, await 구문을 사용하게 되면 예외가 발생되는 시점이 try가 싸고 있는 시간과 일치하기 때문에 try...catch, .catch 둘다 사용 가능하지만 오류 디버깅을 위해 try...catch 구문을 많이 사용한다
  • try...catch : 스스로 에러를 잡고, 에러를 거부상태의 프라미스로 변경시킨다
  • .catch : 프라미스에서 발생한 모든 에러를 다루고 에러를 처리하고 싶은 지점에 정확히 위치시켜야 하며 어떻게 에러를 처리할지 알고 있어야 한다