Await, Async Promise 차이들

역사적으로 Promise 가 나옴, Promise 도 객체 , then 으로 하여서 callback 함수 진행

axios. post , get ⇒ Promise 반환 하는 함수.

but Callback 지옥 발생 → Async Await 키워드가 생겨서 가독성 쉽게 할 수 있도록 만듬

Async ⇒ 함수가 promise 를 반환 한다는 의미 , 일종의 표시 역할

Await ⇒ 비동기 작업을 시작 한다는 의미, promise 올때까지 대기 , 비동기 끝내기 전에 React 내에서는 밀고 JavaScript 내에서는 그대로 메모리 상에 남는다.

Promise ⇒ 수동으로 eternal return

UseMemo UseCallback의 차이

useMemo 외부에서 값을 가져올 때 쓰인다. 메모리 안에 저장하고 만약 렌더링 시 시간을 단축시키기 위해 진행한다.

ex ) N에서 1~ 100 까지 값을 저장한 후 다시 그 값을 불러 올 시 일일히 또 곱하지 말고 N값을 가져올때

function f(x){ return 2 * x + 1; }

//메모 하려는게 함수면 useCallback
const f = useCallback(x => 2 * x + 1, []);

// 메모
const f = useMemo(() => x => 2 * x + 1, []);

const loadList = useCallback(async () => {
    if(!token){
      return;
    }
    const { data } = await axios.get("<https://pre-onboarding-selection-task.shop/todos>", {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    setList(data);
  
  }, [token]);