[React] React.memo() : 리렌더링 방지 방법

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

 

이전글에 이어,

[React] 함수형 컴포넌트의 props 사용

 

이번에는 props를 조금 더 다양하게 사용해보겠습니다.

 

1. 주의사항!

- 이 코드는 어떤 역할을 할까요? 버튼을 클릭하면 Save Changes가 Revert Changes로 텍스트가 변경되는?

놀랍게도 아닙니다. <Btn>은 저희가 만든 컴포넌트로, 여기서 사용하는 onClick은 props의 명칭이지 이벤트리스너가 아닙니다.

function Btn({ text }) {
    return (
        <button>
            {text}
        </button>
    );
}

function App() {
    const [value, setValue] = React.useState("Save Changes");
    const chageValue = () => setValue("Revert Changes");
    return (
        <div>
            <Btn text={value} onClick={chageValue} /> 
            <Btn text="Continue" />
        </div>
    );
}

 

2. props 지정 (타입 종류)

그래서 이벤트리스너로 사용하고 싶을 경우, 다음처럼 props를 명확하게 지정을 해주어야합니다.

props를 지정한다고 해서 자동으로 return에 들어가지 않고 꼭 반드시 명시를 해주어야합니다.

이번에 설정한 것처럼 props는 문자형, boolean, 숫자, 함수 등 다양하게 사용 가능합니다.

function Btn({ text, onClick }) {
    return (
        <button
            onClick={onClick}
            style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: "10px",
            }}
        >
            {text}
        </button>
    );
}

function App() {
    const [value, setValue] = React.useState("Save Changes");
    const chageValue = () => setValue("Revert Changes");
    return (
        <div>
            <Btn text={value} onClick={chageValue} /> {/* 여기서 onClick은 props임*/}
            <Btn text="Continue" />
        </div>
    );
}

 

3. 컴포넌트 동작흐름

이제 함수형 컴포넌트의 리렌더링 시점을 알아보겠습니다.

콘솔을 보시면 처음에 버튼이 생성되면서 Save Changes, Continue가 찍히는 것을 보실 수 있습니다.

그 다음 save 버튼을 클릭 시 revert changes와 continue가 다시 출력 되는 것을 확인 할 수 있습니다.

 

동작 흐름:

1. Save Changes 버튼 클릭 시 setValue가 호출됩니다.

2. App 컴포넌트의 state가 변경되었으므로, React는 App을 다시 실행합니다.

3. App이 다시 실행되면서 그 안에 작성된 <Btn text={value} ... />와 <Btn text="Continue" /> 코드를 둘 다 다시 읽습니다.

4. React는 Btn 함수를 다시 호출하게 되고, 그 안에 있는 console.log가 실행되는 것이죠.

Continue 버튼의 Props(text="Continue")는 변하지 않았지만, React는 부모가 호출될 때 자식들도 일단 다 같이 호출하는 것이 기본값입니다.

function Btn({ text, chageValue }) {
    console.log(text, ": was Rendered");
    return (
        <button
            onClick={chageValue}
        >
            {text}
        </button>
    );
}

function App() {
    const [value, setValue] = React.useState("Save Changes");
    const chageValue = () => setValue("Revert Changes");
    return (
        <div>
            <Btn text={value} chageValue={chageValue} /> 
            <Btn text="Continue" />
        </div>
    );
}

 

 

4. React Memo

여기서 Continue 버튼은 변경된 점이 없는데 새로 생겼습니다. 

 

(이걸 방지하려면 React.memo를 사용해야 합니다.)

마치 momorize(기억)하는 것처럼 Continue 버튼의 리랜더링을 결정할 수 있습니다. props가 변경되지 않는다는 한에서 해당 컴포넌트를 다시 그릴지 말지를 말이죠.

const MemorizedBtn = React.memo(Btn);

을 사용 후 Btn태그를 MeorizedBtn으로 변경해주면, 원하는 대로 Revert Changes 버튼만 리렌더링 되는 것을 확인하실 수 있습니다.

function Btn({ text, chageValue }) {
    console.log(text, ": was Rendered");
    return (
        <button
            onClick={chageValue}
        >
            {text}
        </button>
    );
}
const MemorizedBtn = React.memo(Btn);
function App() {
    const [value, setValue] = React.useState("Save Changes");
    const chageValue = () => setValue("Revert Changes");
    return (
        <div>
            <MemorizedBtn text={value} chageValue={chageValue} /> {/* 여기서 onClick은 props임*/}
            <MemorizedBtn text="Continue" />
        </div>
    );
}

 

이렇게 React.memo() 를 이용하면 컴포넌트의 Props가 변경되지 않은 경우 리렌더링 패스하실 수 있습니다.

 

다음 글에서는 Prop Types에 대해 조금 더 알아보겠습니다.

[React] props types 자료형, 필수 값, 기본 값 지정

 

읽어주셔서 감사합니다.