useCallback

7.1 useCallback이란?

7.1.1 기본 구조

const memoizedCallback = useCallback(() => {doSomething(a, b)},[a, b]);

7.1.2 useMemo와의 비교

const memoizedCallback = useCallback(function, deps);
const memoizedValue = useMemo(() => function, deps);

7.2 useCallback을 사용하는 이유

7.2.1 useCallback으로 이벤트 핸들러 함수 재사용하기

import React, { useState } from "react";

function InputId() {
  const [id, setId] = useState("");
  const onChangeId = (e) => {
    setId(e.target.value);
  };

  return <input onChange={onChangeId} />;
}

export default InputId;

import React, { useCallback, useState } from "react";

function InputId() {
  const [id, setId] = useState("");
  // useCallback 사용 
  const onChangeId = useCallback( e => {
    setId(e.target.value);
  }, []);

  return <input onChange={onChangeId} />;
}

export default InputId;

7.2.2 useCallback으로 참조 동일성 문제 해결하기

import React, { useState, useEffect } from "react";

function UserProfile({ id }) {
  const [user, setUser] = useState(null);

  const fetchUserInfo = () =>
    fetch(`https://user-api.com/users/${Id}`)
      .then((response) => response.json())
      .then(({ user }) => user);

  useEffect(() => {
    fetchUserInfo().then((user) => setUser(user));
  }, [fetchUserInfo]);
   
	...
}

import React, { useState, useEffect, useCallback } from "react";

function UserProfile({ id }) {
  const [user, setUser] = useState(null);

// useCallback을 사용한 예제
  const fetchUserInfo = useCallback(
    () =>
      fetch(`https://user-api.com/users/${id}`)
        .then((response) => response.json())
        .then(({ user }) => user),
    [id]
  );

  useEffect(() => {
    fetchUserInfo().then((user) => setUser(user));
  }, [fetchUserInfo]);

...
}

7.3. (실습1) useCallback 사용해보기

7.3.1 useCallback을 사용하지 않았을 때

import { useState, useEffect, useCallback } from "react";
import goLicat from "./go.jpg";
import backLicat from "./back.jpg";

function App() {
    const [locationToggle, setLocationToggle] = useState(false);

    const licatLocation = () => {
        console.log(
            locationToggle
                ? "📍 현재 getLocation값은 true(집에있어요!)"
                : "📍 현재 getLocation값은 false(외출했어요!)"
        );
        return;
    };

    useEffect(() => {
        console.log("licatLocation 함수 호출!");
    }, [licatLocation]);

    return (
        <>
            <h2>📍 라이캣 지금 집에 있나요?</h2>
            <div>
                {locationToggle ? (
                    <img src={backLicat} alt="집에 들어간 라이캣" />
                ) : (
                    <img src={goLicat} alt="외출한 라이캣" />
                )}
            </div>
            <h3>
                라이캣은 지금
                {locationToggle ? " '집에있어요!'" : " '외출했어요!'"}
            </h3>
            <button
                onClick={() => setLocationToggle(!locationToggle)}
                style={{
                    margin: "-5px 10px 0 0",
                    fontSize: "14px",
                }}
            >
                🦁 라이캣 이동!
            </button>
            <button onClick={licatLocation} style={{ fontSize: "14px" }}>
                📍 현재 getLocation값
            </button>
        </>
    );
}

export default App;

7.3.2 useCallback을 사용할 때

const licatLocation = useCallback(() => {
    console.log(
        locationToggle
            ? "📍 현재 getLocation값은 true(집에있어요!)"
            : "📍 현재 getLocation값은 false(외출했어요!)"
    );
    return;
}, []); // 빈 배열을 넣었을 때

❗

useCallback 사용시 주의할 점

실행화면에서 볼 수 있듯이 useCallback으로 licatLocation 함수를 감싸준 결과 useEffect는 더 이상 실행되지 않지만, 현재 locationToggle 에 저장된 state 값은 true임에도 불구하고 licatLocation 함수는 계속해서 false 값을 보여주고 있습니다. 이런 상황은 의존성 배열을 빈 배열로 주게 될 때 만날 수 있습니다. 의존성 배열에 아무 조건도 주지 않는다면, 처음 렌더링될 때의 state 값이 그대로 메모이제이션됩니다. 리렌더링을 해줄 조건이 없어서 계속처음 저장된 상태 그대로를 가져오기 때문입니다. 위의 상황도 콜백함수가 메모이제이션 될 때 locationToggle 값이 false로 저장된 상황이었습니다. 그렇기 때문에 useCallback을 사용할 때는 의존성 배열에 리렌더링을 위한 조건을 반드시 넣어줘야 합니다.

const licatLocation = useCallback(() => {
    console.log(
        locationToggle
            ? "📍 현재 getLocation값은 true(집에있어요!)"
            : "📍 현재 getLocation값은 false(외출했어요!)"
    );
    return;
}, [locationToggle]); // 값을 넣었을 때

7.4. (실습2) useCallback 사용해보기

// ----- (1)

function App() {

	//useState
  const [yellowSay, setYellowSay] = useState(false);
  const [blueSay, setBlueSay] = useState(true);
  const [licatSize, setLicatSize] = useState(50);

	const toggleYellow = () => setYellowSay(!yellowSay); ----- (2)
  const toggleBlue = () => setBlueSay(!blueSay);
 
	const licatStyle = {
    width: `${licatSize}px`,
    height: `${licatSize}px`,
  };

	// 라이캣 스타일, 이미지, useEffect를 반환하는 RealLicat 컴포넌트
  const RealLicat = ({ licatSize }) => {
    useEffect(() => {
      console.log("커져라, 라이캣!");
    }, [licatSize]);

    return <img src={licat} alt="라이캣이미지" style={licatStyle} />;
  };

  return (
    <>
      <h2>📍 라이캣의 현재 키는 {licatSize}px</h2>
      <img src={building} alt="빌딩" />
      
			<button onClick={() => setLicatSize(licatSize * 2)}>🪄</button>
      <RealLicat />

      <MemoMessage who="🟦" say={blueSay} toggle={toggleBlue} />
      <MemoMessage who="🟨" say={yellowSay} toggle={toggleYellow} />
      <img src={friends} alt="파이썬 친구들" />
    </>
  );
}

function Message({ who, say, toggle }) {
  console.log({ who, say });
  return (
    <>
      <div className="message">{say ? "라이캣!" : "안녕~"}</div>
      <button onClick={toggle}>{who}의 인사</button>
    </>
  );
}

const MemoMessage = React.memo(Message);

// 이전 코드
const toggleYellow = () => setYellowSay(!yellowSay);
const toggleBlue = () => setBlueSay(!blueSay);

// useCallback을 추가한 코드
const toggleYellow = useCallback(() => setYellowSay(!yellowSay), [yellowSay]);
const toggleBlue = useCallback(() => setBlueSay(!blueSay), [blueSay]);

7.4.1 최종코드

import React, { useState, useEffect, useCallback } from "react";
import "./style.css";
import licat from "./licat.png";
import friends from "./friends.png";
import building from "./building.png";

function Message({ who, say, toggle }) {
  console.log({ who, say });
  return (
    <>
      <div className="message">{say ? "라이캣!" : "안녕~"}</div>
      <button onClick={toggle}>{who}의 인사</button>
    </>
  );
}

Message = React.memo(Message);

export default function App() {
  const [yellowSay, setYellowSay] = useState(false);
  const [blueSay, setBlueSay] = useState(true);
  const [licatSize, setLicatSize] = useState(50);

  const toggleYellow = useCallback(() => setYellowSay(!yellowSay), [yellowSay]);
  const toggleBlue = useCallback(() => setBlueSay(!blueSay), [blueSay]);

  const licatStyle = {
    width: `${licatSize}px`,
    height: `${licatSize}px`,
  };

  const RealLicat = ({ licatSize }) => {
    useEffect(() => {
      console.log("커져라, 라이캣!");
    }, [licatSize]);

    return <img src={licat} alt="라이캣이미지" style={licatStyle} />;
  };

  return (
    <>
      <h2>📍 라이캣의 현재 키는 {licatSize}px</h2>
      <div className="background">
        <img src={building} alt="빌딩" />
        <div className="bigger-licat">
          <button onClick={() => setLicatSize(licatSize * 2)}>🪄</button>
          <RealLicat />
        </div>
        <div className="python-friends">
          <div>
            <Message who="🟦" say={blueSay} toggle={toggleBlue} />
            <Message who="🟨" say={yellowSay} toggle={toggleYellow} />
          </div>
          <img src={friends} alt="파이썬 친구들" />
        </div>
      </div>
    </>
  );
}

.background {
    background-color: rgb(203, 228, 250);
    display: flex;
    flex-direction: row;
}

.bigger-licat, .python-friends {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}


.message {
    background-color: white;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    margin: 10px 3px 10px 65px;
}