React Hook - useMemo, React.memo, useCallback

choi seung-i·2022년 3월 23일
0

FE로그

목록 보기
7/19
post-thumbnail
  • 연산 최적화 할 때 사용
  • Memoization : 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억(캐싱) 해 두었던 데이터를 반환 시키게 하는 방법

🔽 useMemo

일반 함수로 작업시

//App=()=>{}안에 들어있으며, useEffect(()=>{},[])사용 중

const getDiaryAnalysis = () => {
    const goodCount = data.filter((item)=>item.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
  
    return {goodCount, badCount, goodRatio}
  }

const {goodCount, badCount, goodRatio} = getDiaryAnalysis()

//...결과값 사용 예시 생략
  • 첫 로드시 2번 실행됨
    1. App컴포넌트가 처음 Mount될 때
    2. useEffect에서 사용한 getData()가 실행되면서 데이터를 가져온 후 App컴포넌트가 리렌더 될 때
  • 다른 state를 수정 시에도 App컴포넌트가 리렌더되어 한번 더 작동하기에 불필요한 작업을 다시 하는건 비효율적임

useMemo hook 사용

  • useMemo(()=>{},[]) 사용하여 필요 할 때에만 사용 가능
//App=()=>{}안에 들어있으며, useEffect(()=>{},[])사용 중

const getDiaryAnalysis = useMemo(() => {
    const goodCount = data.filter((item)=>item.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = (goodCount / data.length) * 100;
  
    return {goodCount, badCount, goodRatio}
  }, [data.length])

const {goodCount, badCount, goodRatio} = getDiaryAnalysis

//...결과값 사용 예시 생략
  • getDiaryAnalysis는 더이상 함수호출이 아닌 useMemo내의 콜백함수의 return값을 바로 가진다.
  • [ data.length ]가 바뀔 때에만 useMemo를 재실행한다.



🔽 React.memo

  • 고차컴포넌트(HOC, Higher Order Component)
    => 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수
  • 컴포넌트 재 사용 : 부모컴포넌트가 재렌더 될 때 재렌더가 필요하지 않은 자식컴포넌트도 재렌더 되는걸 방지
    => 부모컴포넌트의 스테이트가 바뀔 때 재렌더방지용
    => 본인의 스테이트가 바뀔 때는 재렌더 됨
  • 함수형 컴포넌트에 업데이트 조건을 걸어줌 : 자식컴포넌트는 업데이트 조건에 따라서만 렌더링 되게 함
  • 기본 사용 문법
    const MyComponent = React.memo(function MyComponent(props) {
      /* props를 사용하여 렌더링 */
    });
    • 동일한 props로 동일한 결과를 렌더링 한다면 재실행 하지 않는다!
      => 마지막으로 렌더링 한 결과를 재사용함

예제
const CounterA = React.memo(({count}) => {
    useEffect(()=>{
        console.log(`CounterA Update - count: ${count}`)
    })

    return <div>{count}</div>
})

const CounterB = React.memo(({obj})=>{
    useEffect(()=>{
        console.log(`CounterB Update - count: ${obj.count}`)
    })

    return <div>{obj.count}</div>
})

const OptimizeTest = () => {
    const [count, setCount] = useState(1);
    const [obj, setObj] =useState({
        count: 1,
    });

    return <div style={{ padding: 50 }}>
        <div>
            <h2>Counter A</h2>
            <CounterA count={count}/>
            <button onClick={() => setCount(count)}>A button</button>
        </div>
        <div>
            <h2>Counter B</h2>
            <CounterB obj={obj}/>
            <button onClick={() => setObj({
                count: obj.count,
            })}>B button</button>
        </div>
    </div>
  • CounterA는 prop으로 동일한 값을 줘서 재실행 되지 않음
  • CounterB는 prop으로 객체를 줘서 얕은비교(객체 !== 객체)가 됨으로 재실행 됨
    => areEaual를 비교함수로 사용하여 한번 더 비교를 해줘야 함
    const areEqual = (prev, next) => {
      if(prev.obj.count === next.obj.count) {
          return true
      }
      return false
    }
    const MemoizedCounterB = React.memo(CounterB, areEqual)
    => obj.count의 값이 동일하면 true를 반환하기에 재실행되지 않음

🔽 useCallback

  • 메모이제이션된 콜백을 반환 : useMemo와 비슷하게 동일한 작업을 방지하게 해주는 것
    => useMemo는 값을 반환해서 전달하지만, useCallback은 함수 자체를 전달
    => useCallback(fn, deps)useMemo(() => fn, deps) 와 같다
  const onCreate = useCallback((author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    }
    dataId.current += 1;
    setData((data) => [newItem, ...data])
  },[])
  • Mount될 때 실행되는것을 마지막실행으로 기억하고 동일한 작업을 해야할 때 마지막실행을 가져다 씀
  • 함수재생성 하면서 최신state 유지 : setData()에서 현재 data값을 담아 함수를 전달해줌으로써 onCreat가 변동사항 있을때에도 data의 유지가 가능


공부하며 정리&기록하는 ._. 씅로그

profile
Front-end

0개의 댓글