[React] Study # 18 | React.memo

💡React.memo?

• 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능을 최적화 시켜주는 함수!
• 이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄 수 있다.
• 사용법은 그냥 감싸주면 됨!

CreateUser.js 에 적용

// 컴포넌트 리렌더링 방지를 위한 React.memo 
export default React.memo(CreateUser);

왕 쉬움! 

 

UserList.js 에 적용

import React, {useEffect} from 'react'

// user리스트들이 보여지는 부분
const User = React.memo(function User({user, onRemove, onToggle}) {
    return(
        <div>
            <span
                style={{ 
                    cursor: 'pointer',
                    color: user.active ? 'green':'black',
                }}

                onClick={()=>onToggle(user.id)}
                >{user.username}</span>
            &nbsp;
            <span>{user.email}</span>
            <button onClick={()=>onRemove(user.id)}>삭제</button>
        </div>
    )
});

function UserList({users, onRemove, onToggle}) {

    return (
        <div>
            {users.map(user => (
                <User user={user} key={user.id} onRemove={onRemove} onToggle={onToggle}/>
            ))}
        </div>
    )
}

export default React.memo(UserList);

-> 이렇게 적용을 다하면, input 수정을 할 때 하단의 UserList가 리렌더링 되지 않는것을 확인할 수 있다.

 

🚫하지만 UserList의 User중 하나라도 수정하면 모든 User 들이 리렌더링 되고, CreateUser(input과 등록 버튼 부분)도 리렌더링이 된다. -> 이유는 users 배열이 바뀔 때 마다 onCreate, onToggle, onRemove 모두 새로 만들어지기 떄문이다.

const onCreate = useCallback(() => {

    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
},[users, username, email]);

const onRemove = useCallback(id => {
  setUsers(users.filter(user => user.id !== id))
},[users]);

const onToggle = useCallback(id => {
  setUsers(
    users.map(user => 
      user.id === id ? { ...user, active: !user.active} : user
    )
  )
},[users])

-> 이렇게 3개의 이벤트 안의 deps에 users가 들어가 있기 때문에, 배열이 바뀔 때마다 함수가 새로 만들어지는 것은 당연하다.

 

💡그럼 이걸 최적화 하고 싶다면 어떻게 해야할까?

1. deps에서 users를 지운다.
2. 함수들에서 현재 useState로 관리하는 users를 참조하지 않게 한다.
3. 2번은 어떻게 할까? 바로 함수형 업데이트로!

➰함수형 업데이트

• 함수형 업데이트는 useState에 값을 그대로 전달하는 것이 아니라, 함수를 전달하는 것이다
• 함수형 업데이트를 하게 되면, setUsers에 등록하는 콜백함수의 파라미터에서 최신 users를 참조할 수 있기 때문에 deps 에 users를 넣지 않아도 된다.

 

기존에 deps에 배열이 있으면 그 해당 배열이 바뀔 때마다 onToggle등의 함수가 아예 새로 만들어지는데, 함수형 업데이트를 통해 deps를 받지 않고 setUsers의 최신 users를 참조하는 함수의 형태로 만든다면 함수가 다시 만들어지지 않는다..?!

 

 

그럼 각 함수들을 업데이트 해보자! (onChange의 경우엔 함수형 업데이트를 해도 영향은 가지 않지만, 연습삼아 해보자!)

import React,{useRef, useState, useMemo, useCallback} from 'react'; // useCallback 불러오기
import UserList from './UserList';
import CreateUser from './CreateUser';

function countActiveUsers(users){
  console.log('활성 사용자 수를 세는 중...');
  return users.filter(user => user.active).length;
}

function App() {

  const [inputs, setInputs] = useState({
    username: '', email: ''
  })


  const {username, email} = inputs;


  const onChange = useCallback ( e => {
    const {name, value} = e.target;
    // setInputs에 등록하는 콜백함수 파라미터에서 
    // 최신 inputs를 참조 할 수 있다.
    setInputs(inputs => ({
      ...inputs,
      [name]: value
    }))
    // deps 비우기
  }, []
  );


  const [users, setUsers] = useState(
    [
      {id: 1, username: 'John', email: 'john@example.com',
      active: true,
    },
      {id: 2, username: 'Car', email: 'car@example.com',
      active: false,
    },
      {id: 3, username: 'lee', email: 'lee@example.com',
      active: false,
    },
    ]
)
    

const nextId = useRef(4);

const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    // setUsers에 등록하는 콜백함수 파라미터에서 최신 users를 참조할 수 있다.
    setUsers(users => users.concat(user));

    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;

    // deps에서 users 지우기
},[username, email]);

const onRemove = useCallback(id => {
  // setUsers에 등록하는 콜백함수 파라미터에서 최신 users를 참조할 수 있다.
  setUsers(users => users.filter(user => user.id !== id))
  // deps에서 users 지우기
},[]);

const onToggle = useCallback(id => {
  // setUsers에 등록하는 콜백함수 파라미터에서 최신 users를 참조할 수 있다.
  setUsers(users =>
    users.map(user => 
      user.id === id ? { ...user, active: !user.active} : user
    )
  )
  // deps에서 users 지우기
},[])

const count = useMemo(() => countActiveUsers(users),[users]);

  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
      <div>활성 사용자 수 : {count} </div>
    </>
  );
}

export default App;

-> 이렇게 해주면 특정 항목을 수정할때, 해당 항목만 렌더링 되며 최적화가 끝난 것이다!

 

---

실제 리액트 개발시,

계속 배웠던 useCallback(함수 재사용), useMemo(값 재사용), React.memo(리렌더링 방지)는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 한다.

ex) User 컴포넌트의 b와 button에 onClick으로 설정해준 함수들은 해당 함수들을 useCallback으로 재사용한다해서 리렌더링을 막을 수 있는 것은 아니므로 굳이 그렇게 할 필요는 없다.

 

➕ 렌더링을 최적화 하지 않을 컴포넌트에 React.memo를 사용하는 것은 불필요한 props 비교만 하는 것이다.

 

➕React.memo에서 두번째 파라미터에 propsAreEqual 이라는 함수를 사용하여 특정 값들만 비교를 하는 것도 가능하다.

export default React.memo(
	UserList,
    (prevProps, nextProps) => prevProps.users === nextProps.users
);

-> 하지만 여기서 의도치 않은 버그들이 발생할 수 있다. 

예를들어, 함수형 업데이트로 전환을 안했는데 이렇게 users만 비교를 하게 된다면 onToggle과 onRemove에서 최신 users배열을 참조하지 않으므로 심각한 오류 발생!

 

---

Reference

https://velog.io/@suyeonme/react-useState의-비동기적-속성-함수형-업데이트