2022.07.13 - React / useMemo, useCallback, useRef

 useReducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

상태를 관리할때 사용하는 hook 함수로, useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 

 

 

- useMemo : 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 시키는 Hooks 이다.

리액트는 dom에 변화가 있을때마다 랜더링을 하는데, 그 과정에서 수행해야할 연산을 계속 반복한다. 

이것은 자원의 낭비가 될 수 있으므로 원하는 연산을 수행하지 않을때에는 변하지 않게 하도록 정하는 것이 useMemo이다. 

const num = useMemo(callback, deps); //deps는 연산을 수행할 배열

 const count = useMemo(() => {
    //count는 persons에 의존적임 , 낭비되지 않기위해 usememo 사용 (첫번째인자 함수, )
    return sum(persons);
    // 그냥 usememo를 사용하면 계속 숫자가 올라가기때문에 제한을 줘야함 
    // (dependency 리스트를 두번째 인자로 받음 )
    // persons가 변했을때만 카운트를 다시 실행하겠따는 의미로 persons 넣기
  }, [persons]);

 

 

-useCallback :  useMemo처럼 연산을 줄이기 위한 Hooks이다. useMemo가 특정 값을 연산하는 것을 최적화 한다면, 

useCallback 은 함수의 재사용을 최적화한다. 

해당 컴포넌트가 랜더링될때만 함수를 생성해두고 다시 사용해서 자원을 낭비하지 않도록 한다. 

const func1 = useCallback(callback, deps); //deps는 연산을 수행할 배열

 

 

- useRef : 어떠한 특정 DOM을 선택할 수 있게 해준다. 직접 DOM을 선택해서 포커스를 주거나, 특정 엘리먼트의 크기나 색상을 변경해야하는 경우가 있는데, 그때 사용하는 것이다. 

 

1. useRef 객체 생성 

const ref = useRef(value);

 

2. 선택할 DOM 에 ref 값으로 객체 넣기 

 {/* 원하는 위치(DOM)에 ref 값 설정한다 */}
 <input value={name} onChange={onChangename} ref={ref} />

 

3. 객체를 통해 수행하고 싶은 작업 설정 

=> reset 클릭시 텍스트 리셋 

  const onClickReset = () => {
    setName("");
    setNickname("");
    // 버튼 클릭시 지정한 위치에 focus 되도록
    ref.current.focus();
  };

 

 

** 차이점 

useMemo : 복잡한 함수 결과(리턴)값을 기억

useCallback : 함수 자체를 기억 

useRef : 일반 값을 기억