[React] React의 렌더링 조건과 렌더링 최적화 방법

💡 지난 주에 Virtual Dom과 함께 렌더링, Props, State에 대해 알아봤었다. => 🔗링크

이번에는 리엑트의 재렌더링 조건 & 렌더링 성능 최적화에 대해서  다루고자 한다.

재렌더링 조건을 알아야 DOM에서 가장 비싼 작업인 Painting 과정을 줄이는, 즉, 렌더링 최적화에 신경을 쓸 수 있기 때문에 짧지만 알고 있어야 하는 중요한 개념이라고 볼 수 있다.

 

 

1. 리액트 재렌더링 조건

1. State (상태) 변경이 있을 때
2. 새로운 props가 들어올 때
3. 기존 props가 업데이트 됐을 때
   • 부모 컴포넌트에서 받은 props의 참조값이 변경되면 그 props 를 받고 있던 자식 컴포넌트도 재렌더링 된다.
4. 부모 컴포넌트가 재렌더링 될 때
   • 부모 컴포넌트가 재렌더링 되면 부모 컴포넌트에 속해있는 자식 컴포넌트들도 전부! 재렌더링 된다.

 

재렌더링 조건은 생각보다 간단하다!

그럼 렌더링 성능을 최적화 할 수 있는 방법 몇 가지를 알아보도록 하자.

 

 

 

2. React Hooks - 리액트 렌더링 성능 최적화 (React.memo, useCallback, useMemo)

 

최적화🤔❓

리액트에서 렌더링이 빈번하게 자주 일어난다는 것은 좋은 것이 아님. 비용(cost)이 발생하는 것은 최대한 줄여아 한다.
이러한 작업을 최적화(optimization)이라고 한다. 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 다음과 같은 훅을 사용하는 것이다.

• memo(React.memo) : 컴포넌트를 캐싱
• useCallback : 함수를 캐싱
• useMemo : 값을 캐싱

 

---

2-1.  memo (React.memo)

import { memo } from "react";

React.memo()

두 가지 방식이 있다 기호에 맞게 쓰면 된다.

위에서 언급한 리 렌더링의 발생 조건 중 4번 케이스(부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두~ 리-렌더링 됨.)를 극복할 수 있는 방법이다.

 

 형태

export default React.memo(메모할 컴포넌트명);

React.memo 코드 링크 첨부

---

기존 문제점

문제의 경우를 살펴보기 위해 예를 들어 다음과 같은 화면이 있다고 가정하자.

기존의 문제는 ' + ' 나 ' - ' 버튼을 눌렀을 때 모든 하위 컴포넌트 박스들까지 다시 그려지게 된다는 것이다.

밑의 사진과 같이 불필요한 렌더링이 발생한다는 것이다.

예시는 콘솔을 찍는 것으로 예시를 뒀다.

 

해결방법: meme를 통해 해결해보기

• React.memo를 이용해서 컴포넌트를 메모리에 저장(*메모리에 저장해두는 것을 캐싱이라고 한다.)해두고 필요할 때 갖다 쓰면 된다. 이렇게 하면 부모 컴포넌트의 state의 변경으로 인해 props가 변경이 일어나지 않는 한 컴포넌트는 리렌더링 되지 않는다. 이것을 ⭐ 컴포넌트 memoization 이라고 한다.

✔ 메모리에 저장할 컴포넌트들의 export 부분을 다음과 같이 코드를 바꿔주면 된다. React.memo() 로 감싸준다.

[Box1] 만 예시로 가져왔음

Box 1, 2, 3 전부 해 줘야 함.

import React from "react";
import styled from "styled-components";

const StBox = styled.div`
    width: 100px;
    height: 100px;
    background-color: #01c49f;
    color: white;
`;

function Box1() {
    console.log("Box1 컴포넌트가 렌더링되었습니다!");
    return <StBox>Box1</StBox>;
}

export default React.memo(Box1);

 

[ 결과 ]

맨 처음만 제외하고 이후에는 부모 컴포넌트의 state가 바뀌어도 렌더링이 되지 않는 것을 알 수 있다.

 

 

 

 

---

 

2-2.  useCallback

useCallback은 props가 전달되었을 때 불필요한 렌더링을 막는다.

문제의 코드들을 보면서 이해하자.

형태

useCallback(()=>저장할 함수, [의존성 배열값])

 

문제1

부모 컴포넌트에서 초기화를 할 시 함수를 prop으로 받은 자식 컴포넌트도 다시 렌더링이 되는 코드를 가져왔다.

자식 컴포넌트의 렌더링은 막고 싶다.

문제의 코드를 먼저 보자. 위의 React.memo의 코드를 그대로 가져와서 쓰고 있다.

[ app.jsx(부모 컴포넌트)의 일부 코드 ]

    const initCount = () => {
        setCount(0);
    };

    return (
        <>
            <h3>카운트 예제입니다!</h3>
            <p>현재 카운트: {count}</p>
            <button onClick={onPlusButtonClickHandler}>+</button>
            <button onClick={onMinusButtonClickHandler}>-</button>
            <div style={{ display: "flex", margin: "10px" }}>
                <Box1 initCount={initCount} />
                <Box2 />
                <Box3 />
            </div>
        </>
    );
}

•  Box1 컴포넌트는 부모컴포넌트에서 받은 count를 초기화시키는 함수 initCount 함수를 props로 받아 쓰고 있다.
• 이럴 경우에 App.jsx 에서  + - 버튼을 누르면 부모 컴포넌트의 count가 갱신되면서 리렌더링이 일어난다. 이 때 함수를 props로 받은Box1도 리렌더링이 발생한다. 위에서 언급했듯이 Box1은 React.memo로 감싸져있는 상태인데도 불구하고 말이다.
• initCount 함수는 count를 초기화해주는 함수라고 말했다. 함수코드가 바뀌었는가? 아니다. 함수는 함수이지 state 가 아니다.  분명 Box1은 함수를 props로 받았는데 왜 props로 내려온 값이 바뀌었다고 판단했을까? 그 이유는 다음과 같다.
  1. 자바스크립트에서 함수는 객체의 한 종류⭐라고 본다.
  2. 변수 영역 메모리가 별도의 공간을 바라보고 있는 주소값을 저장한다.
  3. 다시 리렌더링이 발생하면 이전에 있었던 함수들은 그대로 있고 새로운 값 initCount를 새로운 공간에 저장을 하게 된다.
  4. initCount는 결국 새로운 주소를 갖게 되는 것이다. 리액트는 변수 영역 메모리가 새로운 주소값을 가지면 렌더링을 한다.
  5. 그렇기 때문에 Box1 입장에서는 props가 바뀌었다고 판단하여 리렌더링을 하는 것이다.

 

해결방법

이럴 때는 initCount를  다음과 같이 useCallback으로 감싸야 한다.

React.memo 는 컴포넌트를 메모이제이션 했다면, useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)한다.

useCallback 도 마찬가지로 의존성 배열을 두 번 째 인자로 받는다.

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []);

이렇게 하면 정상적으로 자식 컴포넌트의 불필요한 렌더링을 막을 수 있다.

 

문제2

숫자를 바꿨다가 초기화를 시키면 다음과 같은 콘솔을 찍게 하고자 한다.

const initCount = useCallback(() => {
    console.log(`${count}에서 0으로 변경되었습니다.`);
    setCount(0);
}, []);

코드를 변경 후에  숫자를 3까지 늘린 후에 초기화 버튼을 누름으로써 initCount  useCallback문의 콘솔을 찍어보았다.

count는 몇으로 나올까? 원래 의도는 '3에서 0으로 변경되었습니다'를 출력하는 것이다.

하지만 결과는 '0에서 0으로 변경되었습니다.' 라고 콘솔을 찍었다. 그 이유는 다음과 같다.

 

 

✔ ⭐ useCallback이 메모이제이션을 하는 시점은 처음에 App.jsx 컴포넌트가 그려지는 시점이다.⭐ 이 시점에 useCallback이 initCount를 어떤 모양으로 메모이제이션 하는지 보자.

() => {
    console.log(`${count}에서 0으로 변경되었습니다.`);
    setCount(0);
}

이와 같은 모양 그대로 저장을 하게 된다.

그리고 메모이제이션을 하는 시점은 처음에 App.jsx가 그려지는 시점이라고 언급하였다. 이 때의 count값은 ? 

const [count, setCount] = useState(0);

0이다. 그래서 count 가 0인 상태로 메모이제이션에 저장되어 있는 것이다.

=> 초기값을 3으로 설정해두면 '3에서 0으로 변경되었습니다' 라고 콘솔을 찍는다.

 

 

해결방법

콘솔을 제대로 뿌려주기 위해서는 count 가 바뀔 때 만큼은 다시 메모이제이션 하도록 해야 한다.

그럴 때! 의존성 배열값을 쓰는 것이다. 그 state 값을 추적하게 된다.

const initCount = useCallback(() => {
    console.log(`${count}에서 0으로 변경되었습니다.`);
    setCount(0);
}, [count]);

6번 올린 후 초기화를 누르면 정상적으로 '6에서 0으로 변경되었습니다' 를 콘솔에 찍는다.('Box1 컴포넌트가 렌더링되었습니다' 콘솔은 의존성 배열값으로 count를 넣었기 때문에 변경이 있을 때마다 찍히게 되는 것이다. 주석 처리하자.)

 

🔗결과 코드 링크

 

 

 

 

 

 

---

2-3. useMemo

• 값에 대한 메모이제이션 기능을 해준다.
• 여기서 값은 함수가 return 하는 값 또는 그냥 값 그 자체이다.
• 무거운 작업 수행 시 도움이 된다.

형태

const heavyWork = () => {
    for (let i = 0; i < 1000000000000000; i++) {
        return 100;
    }
};

const value = useMemo(() => heavyWork(), []);

 

 

사용 예시 1 : 무거운 작업을 할 때 사용

무거운 작업 useMemo 사용 전후 차이를 몸소 느끼는게 더 도움이 될 듯.

[ App.jsx ]

import HeavyComponent from "components/HeavyComponent";
import React from "react";
import styled from "styled-components";

const Stnav = styled.nav`
    background-color: yellow;
    margin-bottom: 30px;
`;
const Stfooter = styled.footer`
    background-color: green;
    margin-bottom: 30px;
`;

// heavy work -> 엄청 무거운 작업...!!
function App() {
    return (
        <>
            <Stnav>네비게이션 바</Stnav>
            <HeavyComponent />
            <Stfooter>푸터 영역이에요.</Stfooter>
        </>
    );
}

export default App;

[ HeavyComponent.jsx ]

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

function HeavyComponent() {
    const [count, setCount] = useState(0);

    const countHandler = () => {
        setCount(count + 1);
    };

    const heavyWork = () => {
        for (let i = 0; i < 1000000000000000; i++) {
            return 100;
        }
    };

    // const value = heavyWork();
    const value = useMemo(() => heavyWork(), []);
    console.log(`value는 ${value}입니다.`);

    return (
        <>
            <p>나는 엄청 무거운 컴포넌트야!</p>
            <button onClick={countHandler}>
                누르면 아래 count가 올라가요!
            </button>
            <br />
            {count}
        </>
    );
}

export default HeavyComponent;

 

 

사용 예시 2 : 변경되지 않았음을 명시

 

 그렇기 때문에 문제가 발생할 수도 있다. 다음 예시코드에서 발생할 수 있는 문제를 보자.

 

 

[ 예시 코드 ]

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

function ObjectComponent() {
    const [isAlive, setIsAlive] = useState(true);
    const [uselessCount, setUselessCount] = useState(0);

    const me = {
        name: "Ted Chang",
        age: 21,
        isAlive: isAlive ? "생존" : "사망",
    };

    useEffect(() => {
        console.log("생존여부가 바뀔 때만 호출해주세요!");
    }, [me]);

    return (
        <>
            <div>
                내 이름은 {me.name}이구, 나이는 {me.age}야!
            </div>
            <br />
            <div>
                <button
                    onClick={() => {
                        setIsAlive(!isAlive);
                    }}
                >
                    누르면 살았다가 죽었다가 해요
                </button>
                <br />
                생존여부 : {me.isAlive}
            </div>
            <hr />
            필요없는 숫자 영역이에요!
            <br />
            {uselessCount}
            <br />
            <button
                onClick={() => {
                    setUselessCount(uselessCount + 1);
                }}
            >
                누르면 숫자가 올라가요
            </button>
        </>
    );
}

export default ObjectComponent;

• 코드는 isAlive 값에 따라서 me 객체의 내부 값이 달라지고 그에 따라 렌더링이 발생한다.
• 근데 이것을 useEffect의 의존성 배열값에 me를 줌으로써 me가 바뀔 때만 console을 찍도록 의도하였다.
• 그리고 me 객체와 아무 관련이 없는 uselessCount state가 있다. 아무 관련 없는 uselessCount 값이 바뀌었을 때는 useEffect 문의 콘솔이 찍히지 않을 것이라고 생각할 것이다.
  하지만 결과는 다음과 같다.

• 아무 관련 없는 숫자를 올렸더니 useEffect문의 콘솔이 찍혔다. 분명 의존성 배열값에 me를 넣었음에도 불구하고 말이다. 그 이유는 다음과 같다.
• ⭐함수형 컴포넌트가 호출되면 컴포넌트가 새롭게 만들어지면서 모든 내부 요소들도 새롭게(참조형 데이터도 아예 새로운 주소를 가짐) 만들어진다.⭐
• state가 바뀌면 렌더링이 발생하는 것은 알고 있을 것이다.
• 이 때 컴포넌트 함수가 호출이 된다. 이 때 me 객체도 다시 할당이 되는 것이다.(새로운 메모리 주소값을 할당받는다.)그러면 리액트 입장에서는 me 객체가 바뀌었다고 인식하고 useEffect 내부 로직이 호출되게 된다.

해결 방법

const me = useMemo(() => {
    return {
        name: "Ted Chang",
        age: 21,
        isAlive: isAlive ? "생존" : "사망",
    };
}, [isAlive]);


useEffect(() => {
    console.log("생존여부가 바뀔 때만 호출해주세요!");
}, [me]);

• useMemo 로 객체를 감싸고 의존성 배열값에 me 객체에 변동을 주는 isAlive state를 넣어주면 된다.
• me 객체는 memoization이 되어 있어서 isAlive 값이 바뀔 때에만 갱신(다시 메모이제이션)이 이뤄지는 객체가 된 것이다.
• 여전히 상관없는 uselessCount state를 올려도 함수 컴포넌트가 다시 새롭게 렌더링되지만, me가 갱신이 되지 않아(최초에 메모리에 저장해놨던 객체를 그대로 다시 가져오기 때문임) useEffect 문이 실행이 안 된다. 즉, 콘솔을 찍지 않는다.

 

*참고로 vsCode가 이런 문제는 자동으로 캐치해준다

vscode 자체에서도 문제를 감지하고 useMemo 사용을 추천해준다 😄

 

🚨주의사항

캐싱 기능을 가진 훅의 남발은 메모리 확보를 너무 많이 하게 되기 때문에 오히려 성능이 악화될 수 있다.

프로그램이 프로세스로서 돌아가려면 메모리 할당을 받아야 하는데 이러한 중요한 공간이 부족해지는 것이다. 그러니 필요할 때만 쓰도록 하자.