[TIL] 0606 | React with Redux, Next.js, TypeScript

목차

• React.memo()로 불필요한 재평가 방지하기
• useCallback()으로 함수 재생성 방지하기
• useCallback() 및 종속성에 대하여

✧ React.memo()로 불필요한 재평가 방지하기

• 사실 이런 간단한 앱에서는 몇 개의 자식 컴포넌트를 리렌더링하는 것은 성능 면에서 크게 문제가 되지 않을 수도 있다. 하지만 이보다 큰 어플리케이션이라면 자식 컴포넌트는 더 복잡하고 다양하게 많아질 것이고, 리렌더링으로 인한 성능을 고려하지 않을 수 없다. 좀 더 최적화가 필요하다는 이야기다. 따라서 개발자는 특정한 상황일 경우에만 자식 컴포넌트를 리렌더링 하도록 React 에 지시할 수 있어야 할 것이다.

React.memo() 사용하기

• 앞서 거론한 특정한 상황이란 무엇일까? 예를 들면, 자식 컴포넌트가 부모 컴포넌트로 부터 받은 props 가 변경되었을 때를 생각해보자.

App.js

<DemoOutput show={false} />

• App 컴포넌트에서 DemoOutput 컴포넌트로 전달하는 show 부분을 다시 불러오면, React는 show 상태(state) 값이 바뀔 때에만 DemoOutput 컴포넌트를 리렌더링을 할 수 있다면 이것이 특정한 상황이라고 말할 수 있을 것이다. 그렇다면, 우리는 어떻게 React 에 '특정한 상황' 일 때만 자식 컴포넌트를 리렌더링 할 수 있도록 지시할 수 있을까?

• 먼저, props가 바뀌었는지 확인할 컴포넌트를 지정한 뒤

DemoOutput.js

const DemoOutput = (props) => {
  console.log("DemoOutput RUNNUNG");
  return <MyParagraph>{props.show ? "This is New!" : ""}</MyParagraph>;
};

export default DemoOutput;

• 이것을 통째로 warp 해주면 된다.

const DemoOutput = (props) => {
  console.log("DemoOutput RUNNUNG");
  return <MyParagraph>{props.show ? "This is New!" : ""}</MyParagraph>;
};

export default React.memo(DemoOutput);

• 이렇게 React.memo() 로 warp을 해주는 것은 함수형 컴포넌트에서만 가능하다. 클래스 기반의 컴포넌트의 경우 작동하지 않는다.

• React.memo()는 함수형 컴포넌트를 최적화한다. 이 memo()는 어떤 역할을 할까? React.memo()는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지를 확인하고, 입력되는 모든 props의 새로운 값을 확인한 뒤 이를 기존의 props 값과 비교하도록 React에 전달하는 역할을 한다. 그리고 props의 값이 바꾸니 경우에만 컴포넌트를 재실행 및 재평가 한다.

• 즉, 부모 컴포넌트가 변경되었지만 React.memo()로 감싼 컴포넌트의 props가 변하지 않았다면 이 컴포넌트의 재실행은 건너뛰게 되는 것이다.

• 저장하고 콘솔을 확인해보자. 최초에 어플리케이션이 렌더링되면, DemoOutput 컴포넌트에서 출력하는 텍스트인 "DemoOutput RUNNUNG" 도 함께 출력된다. 하지만 콘솔을 초기화한 뒤 버튼을 누르면 "APP RUNNING" 와 "Button RUNNING" 는 출력되지만 "DemoOutput RUNNUNG"는 출력되지 않는 것을 볼 수 있다. MyParagraph 컴포넌트는 React.memo()로 감싼 DemoOutput 컴포넌트의 자식 컴포넌트이므로 이 또한 출력되지 않는다.

• 이렇게, 불필요한 재렌더링을 피하기 위해 React.memo()를 사용하여 최적화를 진행했다. 그리고 우리는 여기서 새로운 질문을 마주치게 된다. 이렇게 렌더링 최적화가 가능하다면, 왜 모든 컴포넌트에 적용하지 않는 걸까?

왜 모든 컴포넌트를 최적화하지 않는가

• 최적화에는 비용이 따른다. 이 React.memo()는 어플리케이션에 변경이 일어날 때마다 발생한다. 그리고 App 컴포넌트가 렌더링이 될 때마다 React.memo()로 감싼 컴포넌트로 이동하여, 기존의 props 값과 새로운 props 값을 비교한다. 그러면 React는 여기서 두 가지 작업이 필요하다. 먼저, 기존의 props 값을 저장할 공간이 필요하고 비교하는 작업이 첫 번째이고 두번째로 이 각각의 작업에서 개별적인 성능 비용이 필요하다. 따라서 이 성능 효율은 어떤 컴포넌트를 최적화하느냐에 따라 달라진다.

React.memo()로 이루어지는 성능 비용의 교환

• 우리가 React.memo() 를 사용하여 특정 컴포넌트를 감싼다면, 매번 컴포넌트를 리렌더링하는 데에 필요한 성능 비용과, React.memo()로 감싼 특정 컴포넌트의 props를 비교하는 성능 비용을 서로 맞바꾸는 것과 동일하다.

• 그리고 이런 비용은 특정 컴포넌트에 필요한 props의 갯수와 해당 컴포넌트의 복잡도, 그리고 해당 컴포넌트가 가지고 있는 자식 컴포넌트의 숫자에 따라 달라지는 것이므로 둘 중 어느 쪽의 비용이 항상 높다고 말하는 것은 불가능하다. 물론, 자식 컴포넌트가 많아서 컴포넌트 트리가 크다면 이 React.memo()는 매우 유용하게 쓰일 수 있지만 말이다. 또한 컴포넌트 트리의 상위에 위치해 있다면 전체 컴포넌트 트리에 대한 불필요한 재렌더링을 막을 수 있다.

const DemoOutput = (props) => {
  console.log("DemoOutput RUNNUNG");
  return <MyParagraph>{props.show ? "This is New!" : ""}</MyParagraph>;
};

export default React.memo(DemoOutput);

• 지금처럼 DemoOutput 컴포넌트를 React.memo()로 감싸면서 자동적으로 DemoOutput 컴포넌트의 자식 컴포넌트인 MyParagraph 컴포넌트의 리렌더링도 피할 수 있는 것처럼 말이다.

React.memo() 가 필요하지 않는 경우

• 위의 사례와는 반대로 부모 컴포넌트를 매 번 재평가할 때마다 컴포넌트의 변화가 있거나 props의 값이 변화할 수 있는 가능성이 높은 컴포넌트라면 React.memo() 메소드는 크게 의미를 갖지 못할 것이다. 왜냐하면 React.memo() 메소드를 사용하더라도, 해당 컴포넌트의 재렌더링이 어떻게든 이루어지기 때문이다. 물론 props 값의 추가적인 비교에 대한 비용은 아낄 수 있을지는 모르겠지만 어쨌든 오버헤드로 발생하는 비용도 고려해본다면 굳이 React.memo()를 사용할 필요는 없을 것이다.

• React.memo()가 필요하지 않는 경우는 또 있다. 매우 작은 어플리케이션, 혹은 매우 작은 컴포넌트 트리의 경우에는 굳이 React.memo()로 트리의 가지를 잘라내는 것이 크게 의미가 없기 때문이다. 이렇듯, 모든 컴포넌트를 React.memo()로 랩핑할 필요는 없다. 경우에 따라서 컴포넌트 트리에서 잘라낼 수 있는 소수의 주요 컴포넌트를 선택해서 사용하는 게 좋을 것이다. 이렇게 적합한 용도로 React.memo()를 골라 사용한다면, 모든 컴포넌트를 React.memo()로 감싸는 것보다는 어쨌든 훨씬 효율적일 것이다. (오버헤드도 방지할 수 있다.)

Button 컴포넌트에 React.memo()를 적용하는 게 좋을까?

• Button 컴포넌트는 트리거 컴포넌트이기 때문에 React.memo()를 적용하는 게 옳은지 아닌지에 대해 논할 수 있을지도 모른다.

const Button = (props) => {
  console.log("Button RUNNING");
  return (
    <button
      type={props.type || "button"}
      className={`${classes.button} ${props.className}`}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
};

• 하지만 이 어플리케이션에서 Button 컴포넌트는 다시 변경될 일이 없다는 것을 알고 있으므로 매번 리렌더링 되는 것은 불필요하다는 사실은 분명하다. Button 컴포넌트를 React.memo() 로 감싸보자.

const Button = (props) => {
  console.log("Button RUNNING");
  return (
    <button
      type={props.type || "button"}
      className={`${classes.button} ${props.className}`}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
};

export default React.memo(Button);

• 이제 저장을 하고, 어플리케이션을 새로고침해보자.

• 새로고침 해보면, "Button RUNNING" 이 표시되고, 버튼을 클릭하면 다시 "Button RUNNING"이 출력된다. 우리는 Button 컴포넌트를 React.memo()로 감쌌고, 더이상 리렌더링이 되지 않도록 작업했다. 하지만 왜 이런 일이 발생하는 걸까?

Button 컴포넌트가 계속 리렌더링 되는 이유

• "Button RUNNING"이 계속 출력된다는 것은 props의 값이 계속 바뀐다는 뜻이다.

const Button = (props) => {
  console.log("Button RUNNING");

  return (
    <button
      type={props.type || "button"}
      className={`${classes.button} ${props.className}`}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
};

export default React.memo(Button);

• Button 컴포넌트를 확인해보면 안에는 onClick 이라는 props와 children 이라는 props 를 가지고 있다. 하지만 이 둘 모두 값은 불변 값이다. children으로 받는 텍스트도 동일하고, onClick 이라는 함수도 동일하다. 그리고 이것은 React에서 흔하게 발생하는 오류 중 하나이다.

App.js

function App() {
  const [showParagraph, setShowParagraph] = useState(false);

  console.log("APP RUNNING");

  const toggleParagraphHandler = () => {
    setShowParagraph((prevParagraph) => !prevParagraph);
  };

  return (
    <div className="app">
      <h1>Hi there!</h1>
      <DemoOutput show={false} />
      <Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>
    </div>
  );
}

• App 컴포넌트를 보면, 어쨌건 함수이기 때문에 마치 일반적인 자바스크립트 함수처럼 재실행되는 걸 알 수 있다. 왜냐하면 결국 이것은 상태(state)가 바뀌면 일반적인 자바스크립트 함수와 같기 때문이다. 여기서 조금 다른 점은 App 컴포넌트 함수는 사용자가 아닌 React에 의해 호출된다는 것 뿐이다. 그렇지만 여전히 일반 함수처럼 실행되는데 이 말인 즉슨, 코드가 다시 실행된다는 의미이다. 이것은 무슨 뜻일까?

const toggleParagraphHandler = () => {
  setShowParagraph((prevParagraph) => !prevParagraph);
};

• Button에 onClick이라는 props로 전달되는 이 함수는 매번 재생성된다. 이는 App 함수의 모든 렌더링 또는 모든 실행 사이클에서 매번 새로운 함수라는 뜻이다. 우리가 어플리케이션이 렌더링 될 때마다 매번 새로 만들어지는 상수이고, 재사용되지 않는다는 의미이다.

App 컴포넌트에서 실행되는 함수는 리렌더링 될 때마다 모두 새로 만들어진다

• App 컴포넌트가 리렌더링 될 때마다 App 컴포넌트 내부에 있는 모든 코드 역시 다시 실행되므로 당연하게도 새로운 함수와 상수들이 만들어진다. toggleParagraphHandler 함수 역시 이전에 렌더링 되었던 toggleParagraphHandler 함수가 아니며, 그저 같은 기능을 하는 새로운 toggleParagraphHandler 함수일 뿐이다. 이처럼, App 컴포넌트 함수가 실행될 때마다 만들어지는 상수와 함수는 모두 새로운 상수와 함수이다.

<DemoOutput show={false} />

• 그런데 DemoOutput 컴포넌트에 false 를 props 로 전달할 때에도 앞서 설명한 예시들이 모두 해당된다. 그렇지만 Button 컴포넌트처럼 React.memo()로 감싼 DemoOutput 컴포넌트는 리렌더링 되지 않는다. App 컴포넌트 함수가 리렌더링 될 때마다 false 값 역시 매번 새로 만들어지는데도 불구하고 말이다. 그렇다면, 왜 DemoOutput 컴포넌트와 같은 경우처럼 보이는 Button 컴포넌트만 리렌더링 되는 것일까? false props와는 뭐가 다른 것일까?

DemoOutput 컴포넌트와 Button 컴포넌트와의 차이점

• DemoOutput에 props 로 전달하는 false는 Boolean 값이고, 문자열 또는 숫자열 같은 자바스크립트의 원시값으로 취급된다. React.memo()는 props의 값을 확인하고 props.show를 업데이트 이전의 props.show와 비교한다.

<DemoOutput show={false} />

• 이렇게 이전의 props.show와 재실행되어 생성된 최신 값 props.show를 비교하는데 이 작업은 일반 비교 연산자를 통해 이루어진다. 그리고 이 일반적인 비교 연산자는 비교 값이 원시값 때에서만 올바르게 비교-계산할 수 있게 된다.

React.memo()는 일반 비교 연산자를 통해 비교 계산한다

false === false;
// true
"hi" === "hi";
// true

• 두개의 boolean 값을 비교해서 true 가 나왔다면, 이는 동일한 값이다. 두개의 문자열을 비교해서 true 가 나왔다면 이 역시 동일한 값이다. 하지만 기술적으로 따지자면, 이 두개의 boolean 값과 두개의 문자열 값은 서로 다른 값이다. 하지만 자바스크립트에서 원시값이라면 이런 비교가 가능하다.

[1, 2] === [1, 2];
// false

• 그러나, 배열이나 객체, 함수를 비교한다면 말이 달라진다. 배열이나 객체, 함수는 원시값이 아니라 참조값 이기 때문이다. 우리가 보기에는 동일한 값처럼 보이지만 자바스크립트 내에서는 이 두개의 배열은 같은 값이 아니다. 이는 자바스크립트의 핵심적인 개념이므로 반드시 이해해하고 넘어가야 한다.

<Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>

• 다시 React로 돌아와서 Button에 props 로 넘겨주는 함수를 보자. 직전에 거론했듯이 자바스크립트에서 함수는 하나의 객체이며 참조 값에 불과하다. App 컴포넌트 함수가 재실행될 때마다 함수 내부에 있는 코드들은 재창조 되며, 이 toggleParagraphHandler 함수 역시 새로 만들어진다. 그리고 React.memo()로 감싼 Button 컴포넌트는 이전에 생성된 props.onClick과 새롭게 생선된 최신 값인 props.onClick과 비교하게 된다. 그리고 당연하게도 이 두개의 비교군 값들은 같은 내용을 가지고 있다고 하더라도 자바스크립트 내에서는 동일한 값이 아니라고 취급할 것이다. (참조 값을 비교하는 것이기 때문이다.)

정리

• React.memo() 가 하는 일은 props 의 값을 확인하고, 이전의 props 와 가장 최근의 props 스냅샷을 비교한다. 그리고 이 비교 작업은 일반적인 비교 연산자를 통해 이뤄진다. 일반적인 원시 값이라면 이런 일반적인 비교 연산자를 통해서 비교가 가능할 것이다. 하지만 배열이나 객체, 함수를 비교한다면 말이 달라진다. 배열이나 객체, 함수는 참조 값이기 때문에 일반적인 비교 연산자를 통해서는 동일한 값으로 취급하지 않기 때문이다.
• 이것은 React 에서의 일반적인 이슈 중 하나로, 이 때문에 많은 개발자들이 어려움을 겪고 있다. 그렇기에 React.memo()의 작동방식 즉, 자바스크립트 내에서 비교연산자를 통해 이루어지는 작동방식을 이해하고 사용하는 것은 무척 중요한 일이다. 그렇다면, React.memo()는 props를 통한 객체나 배열 또는 함수를 가져오는 컴포넌트에는 사용할 수 없는 걸까? 다행히도 해결 방법은 존재한다.

✧ useCallback() 으로 함수 재생성 방지하기

• React.memo()로 props로 전달하는 객체나 배열 혹은 함수에도 작동하게끔 만들 수 있다. 객체를 생성하고 저장하는 방식을 조금 변경해준다면 말이다. 그리고 이 작업은 React 에서 제공하는 hook 을 통해서 가능하다. 바로 useCallback() 이라는 hook 이다.

useCallback 사용하기

React 공식 문서 참조 : useCallback()

• useCallback 은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있도록 하는 hook 으로써 useCallback를 통해서 감싼 함수를 저장하여 이 함수가 어플리케이션이 매번 실행될 때마다 재생성할 필요가 없다는 것을 React에 알리는 역할을 한다. useCallback을 사용하여 특정 함수를 감싼다면, 이 함수 객체가 메모리의 동일한 위치에 저장되므로 이를 통해 비교 작업을 할 수 있게 된다. 구체적으로 예를 들어보자.

let obj1 = {};
let obj2 = {};

• 여기 두개의 객체가 있다. 이 둘은 비슷해보일지 모르겠지만, 적어도 자바스크립트에서는 분명 이 두개의 객체는 동일한 취급을 받을 수 없을 것이다.

let obj1 = {};
let obj2 = {};

obj1 === obj2;
// false

• 하지만 obj1과 obj2가 같은 메모리 안의 같은 위치를 가리키고 있다면 어떨까?

let obj1 = {};
let obj2 = {};

obj1 = obj2;

• 동일한 메모리 안의 같은 위치를 가리키도록 obj1에 obj2를 할당해보자.

let obj1 = {};
let obj2 = {};
obj1 = obj2;

obj1 === obj2;
// true

• 자바스크립트는 이 obj1에 obj2를 같은 객체로 간주하게 된다. 이는 useCallback이 하는 일과 정확하게 동일한 역할을 한다.

const toggleParagraphHandler = () => {
  setShowParagraph((prevParagraph) => !prevParagraph);
};

• 우리가 선택한 함수를 React 의 내부 메모리에 저장해서 해당 함수 객체가 재실행 될 때마다 이를 재사용할 수 있도록 하는 것이다. useCallback의 사용법도 매우 간단하다.

const toggleParagraphHandler = useCallback(() => {
  setShowParagraph((prevParagraph) => !prevParagraph);
});

• useCallback으로 저장하려는 함수를 래핑하기만 하면 된다. useCallback을 통해서 어떤 함수를 첫 번째 인자로 전달하면, useCallback는 이 저장된 함수를 반환한다. 이런 작동 과정을 통해서 App 컴포넌트 함수가 재실행될 때마다 useCallback 이 React 의 내부 메모리에 저장된 함수를 찾아서 재사용하는 것이다. 따라서, 어떤 함수가 절대 변경되어서는 안된다면, 이 useCallback hook 을 사용해서 그 함수를 React 내부의 메모리에 저장하면 된다.

const toggleParagraphHandler = useCallback(() => {
  setShowParagraph((prevParagraph) => !prevParagraph);
}, []);

• useCallback 은 두개의 인자가 필요한데 첫 번째 인자는 앞서 거론한 함수이고, 두 번째 인자는 의존성 배열이다. 의존성 배열은 useEffect hook 에서 말하는 의존성 배열과 같은 의미로 쓰인다.
• useCallback 호출에 대한 의존성 배열은 첫 번째 인자인 함수를 감싼 컴포넌트로부터 전달받는 모든 것을 사용할 수 있다. (useEffect 처럼) 즉, 상태(state)나 props, 컨텍스트 같은 것 말이다.

const toggleParagraphHandler = useCallback(() => {
  setShowParagraph((prevParagraph) => !prevParagraph);
}, []);

• 이 toggleParagraphHandler 함수에서는 업데이트 함수 setShowParagraph 를 명시하면 된다. 물론 setShowParagraph을 의존성 배열 안에 추가할 수도 있지만 React가 useCallback을 통해 해당 함수는 절대 변하지 않으며, 이전과 동일한 함수 객체임을 보장하고 있기 때문에 굳이 추가할 필요가 없어서 생략하였다. 다만 이런 코드는 setShowParagraph 에 전달된 함수라는 걸 기억만 하면 될 것이다. 기억한다는 것은 즉, 이 모두가 콜백 함수에 포함되어 있다는 뜻이다.

정리

• 현재 toggleParagraphHandler 함수를 감싼 useCallback의 의존성 배열은 React에 toggleParagraphHandler 함수를 저장하려고 하는 이 콜백 함수는 절대 변경되지 않을 것이라고 React에 알려주는 역할을 한다. 따라서 App 컴포넌트가 다시 리렌더링 되어도 항상 같은 함수 객체가 사용되게끔 하는 것이다.

• 저장하고 새로고침 해보면, 버튼을 여러 번 클릭해봐도 더이상 "Button RUNNING" 문구가 출력되지 않는 것을 알 수 있다. 우리가 전달한 모든 props 값이 원시 값 뿐만 아니라 함수 또한 useCallback을 통해 일반 비교 연산자를 통해 비교가 가능하도록 전달했기 때문에 React.memo()이 역할을 제대로 수행할 수 있도록 했기 때문이다. 즉, useCallback 덕분에 toggleParagraphHandler 객체가 React의 메모리 안에서 항상 같은 객체임을 보장하고 있는 것이다.

✧ useCallback() 및 종속성에 대하여

• useCallback 을 이용하면 함수를 저장하고 이를 재사용할 수 있게 된다.

const toggleParagraphHandler = useCallback(() => {
  setShowParagraph((prevParagraph) => !prevParagraph);
}, []);

• 이제 useCallback 으로 저장한 함수의 의존성 배열을 지정해야 하는데, 이 의존성 배열이 왜 필요한지에 대해서 의아할 수가 있다. 지금의 어플리케이션 내의 함수는 모든 재렌더링 주기마다 항상 똑같은 로직을 쓰는데, 이 의존성 배열은 왜 필요한 것일까?

자바스크립트에서의 함수는 클로저이다.

• 자바스크립트에서의 함수는 클로저이다. 즉, 이 환경에서 사용할 수 있는 값에 클로저를 만들게 된다. 구체적인 예시를 통해 이해해보자.

  <DemoOutput show={showParagraph} />
  <Button>Allow Toggling</Button>
  <Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>

• App 컴포넌트가 렌더하는 Button 컴포넌트 위에 "Allow Toggling" 이라는 텍스트를 넣은 Button 컴포넌트 하나를 더 추가한다. 이 버튼은 Toggle 기능을 활성화해서 아래의 버튼이 작동하게끔 하는 버튼으로 만들 것이다.

const [allowToggle, setAllowToggle] = useState(false);

• Toggle 의 활성화/비활성화 기능을 사용하기 위해서는 이 버튼의 상태(state)가 필요할 것이다. allowToggle 상태(state)를 추가해주자. 초기값은 false 로 설정해준다. 그리고 해당 Toggle 기능을 적용할 버튼에 onClick 이벤트로 해당 트리거 함수를 할당한다.

const allowToggleHandler = () => {
  setAllowToggle(true);
};

...
<Button onClick={allowToggleHandler}>Allow Toggling</Button>;

• Toggle 을 할 것인지 말 것인지를 결정하는 상태(state)를 핸들링하는 트리거 함수 allowToggleHandler도 작성한다. 해당 함수가 트리거 될 때마다 setAllowToggle 상태 업데이트 함수로 true 값으로 업데이트할 것이다. (이 함수는 Toggle 자체의 상태(state)가 아니라 Toggle을 움직이는 버튼 자체에 대한 Toggle을 활성화할 뿐이다.)
• 여기에서 문제가 발생할 수도 있는데, 새로운 버튼에 allowToggleHandler를 바인딩하는 것 외에도 여기의 다른 함수(toggleParagraphHandler)에서 allowToggle 상태(state) 스냅샷을 이용해서 setShowParagraph를 사용할 수 있는지 확인할 것이기 때문이다.

const toggleParagraphHandler = useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, []);

• 텍스트를 Toggle 해주었던 트리거 함수인 toggleParagraphHandler 로 돌아가 allowToggle 상태(state) 스냅샷에 따라 아래의 버튼의 상태(state)가 업데이트 되도록 작성해준다. if 문을 사용해서 만약 allowToggle(Toggle 버튼을 실행할 수 있는지를 체크하는 상태 값)이 true 일 때만 setShowParagraph 상태(state) 업데이트 함수가 실행될 수 있도록 작성해준다. 이렇게 되면, showParagraph 상태(state)는 Toggle 이 허용되는 경우(allowToggle가 true 일 때)만 업데이트하게 된다.

• 저장하고 콘솔창을 확인해보자. 바로 Toggle Paragraph! 버튼을 누르게 되면 텍스트가 보여지거나 하는 등의 액션이 일어나지 않는다. 그리고 Allow Toggling 버튼을 누르고 다시 Toggle Paragraph! 버튼을 눌러보자. 콘솔에는 분명 'App RUNNING' 이 출력되고 있지만, 버튼의 기능은 작동되지 않는다. 우리가 의도한 대로 작동되지 않고 있는 것이다. 왜 그럴까?

• 왜냐하면 자바스크립트에서 함수는 클로저이며 우리가 useCallback을 제대로 사용하지 않았기 때문이다. 위의 이미지를 보면 의존성 배열 [] 부분에 편집기에서 코드 작성에 문제가 있음을 표시해주고 있다.

버튼을 눌러도 반응하지 않는 이유

• 자바스크립트의 함수는 클로저이다. 이 말인 즉슨, useCallback 에서 반환하는 함수가 정의되면(App 컴포넌트 함수 내부에 있는 모든 코드들) 이 함수(useCallback 에서 반환하는 함수)가 정의될 때 자바스크립트는 이 함수 안에서 사용되는 모든 변수를 잠그게 된다. 물론 함수 외부에서 사용하는 모든 변수라고 해야 조금 더 정확한 설명일 것이다.

const toggleParagraphHandler = useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, []);

• 여기에서는 allowToggle이 앞서 설명한 경우에 해당하는데 allowToggle는 App 컴포넌트 함수 외부에 있는 변수나 상수이고,

const [allowToggle, setAllowToggle] = useState(false);

• 이를 useCallback 에서 반환하는 함수 안에서 사용하고 있다.

useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, [allowToggle]);

• 따라서 자바스크립트는 이 allowToggle에 클로저를 만들고, 해당 함수를 정의할 때 사용하기 위해 변수(allowToggle)를 저장한다.

• 그리고 이렇게 되면, 다음에 toggleParagraphHandler 함수가 실행되면 이 저장된 변수(allowToggle)를 그대로 사용하게 된다. 따라서 이 변수의 값은 변수가 저장된 시점(allowToggle의 클로저를 만들 때)의 값을 사용하게 되고, 함수 밖의 변수를 함수 안에서 사용할 수 있으며 우리가 원하는 시점에 함수를 호출할 수 있게 된다.

변수의 값은 변수가 저장된 시점의 값을 사용한다.

• allowToggle 의 값은 allowToggle 가 저장된 시점의 값을 사용한다. 이는 언뜻 보기에 완벽한 기능처럼 보인다. 이런 기능을 사용하면 useCallback 에서 반환하는 함수 밖의 변수를 해당 함수 안에서 사용할 수 있으며 우리가 원하는 시점에 함수를 호출할 수 있기 때문이다.

<Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>

• 버튼에 바인딩한 toggleParagraphHandler 함수처럼 말이다.

useCallback은 함수를 재생성하지 못하도록 한다.

• 그러나, 여기서 문제가 발생한다. 우리는 useCallback을 사용하여 리액트에게 해당 함수를 저장하라고 지시할 수 있다. 이러면 이 함수는 메모리 어딘가에 저장된다. App 함수가 토글 상태가 변경되어 재평가, 재실행되면 리액트는 이 함수를 재생성 하지 않을 것이다. 왜 그럴까? 왜냐하면 우리가 useCallback을 통해 리액트에게 어떤 환경에서든 함수 재생성을 하지 않도록 의도적으로 막았기 때문이다.

useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, []);

• 따라서 리액트가 이 함수에 사용하기 위해 저장한 allowToggle의 값은 최신 스냅샷의 값이 아니라, App 컴포넌트가 처음 실행된 시점의 값을 저장하고 있을 뿐이다. 이전에 거론했듯이 자바스크립트는 함수 생성 시점의 allowToggle 상수의 값을 저장하고 있기 때문이다. 그리고 당연히 이런 점 때문에 오류는 발생한다. 우리가 의도적으로 useCallback을 사용해서 리액트에 함수를 저장하라고 지시하고, App 컴포넌트가 변경되어 재평가, 재실행되도 더이상 해당 함수가 재생성하지 않도록 했기 때문이다. 하지만 때때로 우리는 해당 함수의 재생성이 필요로 할지도 모른다. 그러니까 해당 함수에서 사용하는 즉 함수 외부에서 오는 값(allowToggle)이 업데이트 될지도 모르는 가능성이 있다는 이야기다. 지금의 사례처럼 말이다.

const toggleParagraphHandler = useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, []);

allowToggle 을 종속 형태로 추가하기

• 우리는 allowToggle을 useCallback에 종속성에 추가하려고 한다. 이렇게 되면, useCallback을 통해 리액트에 함수를 저장하라고 지시했어도, 종속 형태로 추가된 allowToggle의 값이 업데이트 되거나 새로운 값이 들어왔을 때 해당 함수를 재생성 하고, 이 재생성된 함수로 저장할 수 있게 된다.

const toggleParagraphHandler = useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, [allowToggle]);

• 이렇게 되면, allowToggle의 최신 값만을 사용할 수 있다. 또한 allowToggle이 변경되지만 않는다면 함수를 재생성하지 않게 되었다. 즉, useCallback을 통한 불필요한 재생성을 방지하는 장점과, 해당 함수에서 사용하는 변수의 값을 최신 값으로 사용할 수 있는 장점을 모두 챙길 수 있게 되었다.

• 저장하고 화면으로 돌아가서 다시 "Toggle Paragraph!" 버튼을 눌러보자. 당연히 처음에는 아무 반응이 없다. 다시 "Allow Toggling" 버튼을 누르고, "Toggle Paragraph!" 을 누르면 드디어 우리가 원했던 모든 출력들이 표시된다. "Toggle Paragraph!" 버튼을 눌렀을 때 "Button RUNNING" 이 한 번만 출력되는 것도 눈여겨봐야 할 부분이다. 당연히 React.memo가 두 번째 버튼에서는 작동하지 않는다. 왜냐하면 "Allow Toggling" 버튼에 연결된 함수인 allowToggleHandler는 useCallback을 사용하지 않았기 때문이다. "Toggle Paragraph!" 버튼이 다시 렌더링 된다면 두 번 표시되겠지만, useCallback이 해당 함수가 매 번 다시 빌드되는 것을 의도적으로 막았기 때문에 다만 의존성으로 주입된 allowToggle 상태가 변경될 때만 해당 문구를 볼 수 있다.

정리

• 지금까지의 개념들은 리액트 보다는 자바스크립트에 가까운 것들이다. 다만, 클로저가 어떻게 작동하는지를 이해하고 원시값과 참조값에 대한 이해가 뒷받침 된다면 리액트의 작동 원리를 보다 완벽하게 이해할 수 있을 것이다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 ⌜React 완벽 가이드⌟ 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기