[react] React Hook 4 (useCallback, useMemo)

📍 useCallback

• callback 함수를 memoize (메모이즈)
• 함수 자체 (function object )를 캐싱하는 훅.
• 함수를 다시 만들지 않는 다는 게 핵심.!!
• 함수의 실행 결과를 캐싱하는 것은 --> useMemo Hook
• 사용 방법
  • useCallback(callback, dependencies)
  • callback  :: 함수를 기록.
  • dependencies :: 이 dependencies 안에 있는 값이 변동이 되면 그때 --> callback 함수를 실행.
    • 만약 dependencies 가 비어있으면 --> 한번 만들고 바꾸지 않을꺼라는 것.
• useEffect(() => {
      console.log("same handleClick reference?", prevRef.current === handleClick);
      prevRef.current = handleClick;
  });
  
  /* 
      useEffect :: 렌더링이 끝난 후 실행되는 코드 
      기본적으로 : - 첫 렌더링 후 1번 실행. 
                 - 리렌더링이 발생할 때 마다 다시 실행. 
      의존성 배열이 없으니까 --> 매 렌더링 후 실행함. 
  
      useRef :: prevRef.current 는 렌더링이 바뀌어도 유지되는 값. 
      값이 바뀌어도 리렌더링을 발생시키지 않음. 
      여기서는 --> 이전 렌더링의 handleClick 함수 참조를 저장하는 용도. 
      
   */
  
• 
  
  

  import { useState, useCallback, useRef, useEffect } from "react";
  import { createRoot } from "react-dom/client";
  
  function Counter() {
      const [count, setCount] = useState(0);
  
      const handleClick = useCallback( () => {
          setCount(perv => perv +1); // 직전 값을 인자로 가져와서 --> 그걸 1을 증가 시킴.
          // setCount(count + 1 ) // 이건 count state 값을 1을 증가 시키는 것임.
      }); 
      // 의존성 배열이 빈 배열이면 
      // --> handleClick 을 처음 렌더링 될 때, 한번만 생성하고 기억하고 있을 꺼임.
  
      const prevRef = useRef(handleClick);
  
      useEffect(() => {
          console.log("same handleClick reference?", prevRef.current === handleClick);
          prevRef.current = handleClick;
      });
  /* 
      useEffect :: 렌더링이 끝난 후 실행되는 코드 
      기본적으로 : - 첫 렌더링 후 1번 실행. 
                 - 리렌더링이 발생할 때 마다 다시 실행. 
      의존성 배열이 없으니까 --> 매 렌더링 후 실행함. 
  
      useRef :: prevRef.current 는 렌더링이 바뀌어도 유지되는 값. 
      값이 바뀌어도 리렌더링을 발생시키지 않음. 
      여기서는 --> 이전 렌더링의 handleClick 함수 참조를 저장하는 용도. 
      
   */
  
      console.log("component rendering")
  
      return (
          <div>
              <h1>Count : {count}</h1>
              <button onClick={handleClick}>증가</button>
          </div>
  
      );
  }
  
  createRoot(document.getElementById('react4')).render(<Counter />);

  
  
  

 

 

---

 

 

📍 useMemo

• Memoized value 를 리턴,.
• Memoization 은 값을 캐싱하는 것.
  • --> 재계산이 필요없게 함.
• 디펜던시가 업데이트 될 때만 useMemo Hook이 실행 됨.
  • --> 성능이 향상될 수 있음.
•  

	useMemo	useCallback
반환하는 것의 차이점.	Memoized 값 반환	Memoization 함수 반환

•  --------------------------------------------------------------------------------------
• useMemo 를 사용하지 않고 하면 하나하나할 때마다 로딩 엄청 걸렸음... 
  • 느린 이유는  const calculation = expensiveCalculation(count); 때문에 느린거임.
  • counter 호출할 때는 expensiveCalculation(count); 가 불러져야하는 게 맞지만, 
  • todo 호출할 때는 얘를 부를 필요가 없음.

  • 

    import { useState, useCallback } from "react";
    import {createRoot} from "react-dom/client";
    
    const expensiveCalculation = (num) => {
        console.log("계산중...");
        for( let i = 0; i < 3000000000; i++ ){
            num += 1;
        }
        return num;
    }
    
    function App() {
        const [count, setCount] = useState(0);
        const [todos, setTodos] = useState([]);
        const calculation = expensiveCalculation(count);
    
        const increment = () => {
            setCount( c => c+1 ); // 여기서 c 는 직전값을 저장하는 그냥 변수임.
        };
    
        const addTodo = () => {
            setTodos( (t) => { return [...t, "새로운 할일"] });
        };
    
        return (
            
            <div>
                <div>
                    <h2>나의 할일들 without useMemo</h2>
                    {todos.map( (todo, idx) => { 
                        return <p key={idx}>{todo}</p>
                    })}
                    <button onClick={addTodo}>할일 추가</button>
                </div>
                <hr />
                <div>
                    Count : {count} <button onClick={increment}> + </button>
                </div>
            </div>
    
        );
    }
    
    createRoot(document.getElementById('react4')).render(<App />);

• ---------------------------------------------------------------------------------------
• useMemo 를 사용해서 해봄.
  • 속도저하의 요인인 expensiveCalculation 부분을 count 값이 변할 때만 실행할 수 있게 useMemo를 사용함.
  • const calculation = useMemo( () => expensiveCalculation(count), [count] );
    // count 값이 변할 때만?? --> expensiveCalculation 를 실행하자.
    [count] 부분이 --> dependencies 임.!!  

  • 

    import { useState, useCallback, useMemo } from "react";
    import {createRoot} from "react-dom/client";
    
    const expensiveCalculation = (num) => {
        console.log(num + " -- 계산중...");
        for( let i = 0; i < 3000000000; i++ ){
            num += 1;
        }
        return num;
    }
    
    function App() {
        const [count, setCount] = useState(0);
        const [todos, setTodos] = useState([]);
        const calculation = useMemo( () => expensiveCalculation(count), [count] );
        // count 값이 변할 때만?? --> expensiveCalculation 를 실행하자.
    
        const increment = () => {
            setCount( c => c+1 ); // 여기서 c 는 직전값을 저장하는 그냥 변수임.
        };
    
        const addTodo = () => {
            setTodos( (t) => { return [...t, "새로운 할일"] });
        };
    
        return (
            
            <div>
                <div>
                    <h2>나의 할일들 with useMemo</h2>
                    {todos.map( (todo, idx) => { 
                        return <p key={idx}>{todo}</p>
                    })}
                    <button onClick={addTodo}>할일 추가</button>
                </div>
                <hr />
                <div>
                    Count : {count} <button onClick={increment}> + </button>
                </div>
            </div>
    
        );
    }
    
    createRoot(document.getElementById('react4')).render(<App />);

• --------------------------------------------------------------------------------------

 

📍 ?

• ㅇㅇ 

 

 

---

출처 : 

https://www.youtube.com/watch?v=bSqXAP7KLyc&list=PLTb3qGCzYjS2AliTIbz9eAGjZSdEQa3m1&index=43

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.