useCallback, useMemo, useReducer, useContext

이재영·2023년 7월 25일
0

React

목록 보기
9/12
post-thumbnail

📌 useCallback 란?

메모이제이션 된 함수를 반환하는 리액트 훅이고, 감지 값이 바뀌면 메모이제이션 함수를 다시 계산.

📌 useMemo 란?

메모이제이션 된 을 반환하는 리액트 훅이고, 감지 값이 바뀌면 메모이제이션 값을 다시 계산.

구조

const exampleUseCallback = useCallback(
  () => {
    // 함수 로직
  },
  [//감지하고 싶은 값]
);

const exampleUseMemo = useMemo(
  () => {
    // 계산된 값
    return // 반환하고 싶은 값;
  },
  [//감지하고 싶은 값]
);

📌 useReducer 란?

useState를 대체할 수 있는 리액트 훅, useState가 계속 작성되는 코드의 복잡성을 단순화

const[count,setCount] = useState(0); 을 대신하여

const init = {count : 0}

으로 대체했고,

const [state,dispatch] = useReducer(reducer, init);
state : init을 불러옴.
dispatch : 작업을 보내는 역할.
useReducer 첫번째 매개변수: 정의한 reducer , 두번째 매개변수: 초기값


📌 useContext 란?

전역 상태의 관리를 도와주는 리액트 훅, store랑 비슷한 느낌

useContext(Global)를 통해 name, setName 구조분해할당으로 받아와서 사용


profile
한걸음씩

0개의 댓글

관련 채용 정보