React- React.memo 를 사용한 컴포넌트 리렌더링 방지

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

React.memo 를 사용한 컴포넌트 리렌더링 방지 하기

 

CreateUser.js

import React from 'react';

function CreateUser({ username, email, onChange, onCreate }) {
    return (
        <div>
            <input 
                name="username" 
                placeholder="계정명" 
                onChange={onChange} 
                value={username}
            />
            <input
              name="email" 
              placeholder="이메일" 
              onChange={onChange} 
              value={email}
            />
            <button onClick={onCreate}>등록</button>
        </div>
    );
}

export default React.memo(CreateUser); // React.Memo를 이 부분에 사용해주면 된다.

위 코드와 같이 React.Memo를 컴포넌트를 내보내주는 곳에 사용해주면 된다.

 

App.js

import React, {useRef, useState, useMemo, useCallback} from 'react';
import UserList from './components/UserList';
import CreateUser from './components/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,
      [name]: value
    });
  }, [inputs]);

  const [users, setUsers] = useState([
    {
        id: 1,
        username: 'progaramexplorer',
        email: 'progaramexplorer@naver.com',
        active: true
    },
    {
        id: 2,
        username: 'tester',
        email: 'tester@gmail.com',
        active: false
    },
    {
       id: 3,
       username: 'liz',
       email: 'liz@daum.net',
       active: false 
    }
]);

const nextId = useRef(4);

const onCreate = useCallback(() => {
  const user = {
    id: nextId.current,
    username,
    email,
  };
  setUsers(user => users.concat(user));
  setInputs({
    username: '',
    email: ''
  });
  nextId.current += 1;
}, [username, email]); // deps 배열에 users를 없애주면 된다.

위 코드와 같이 콜백 함수의 deps 배열에 users를 없애주면 최적화가 끝이 난다.