React 최적화 & 성능개선💡

🧡React의 리렌더링

1. props가 변경되었을 때
2. state가 변경되었을 때
3. 부모 컴포넌트가 리렌더링 되었을 때

부모컴포넌트의 state가 하나만 변해도 하위컴포넌트 전체의 리렌더링이 일어나기 때문에
잘못 사용하면 메모리낭비가 크게 발생하며 성능이 떨어질 수 있다

React app의 성능 최적화를 위해 리렌더링 되는 부분을 최소화해야 함

🧡최적화 Hooks

✨useMemo()

useMemo(실행할 함수, [변화하는지 지켜볼 값(Dependency)]);

• 함수의 결과값(return)을 저장하여 사용
• 디펜던시 값이 변화하지 않으면 함수는 재실행 되지 않고, 저장된 값을 사용
• 불필요한 상황에 해당 함수가 재호출 되는것을 방지

✨useCallback()

useCallback(실행할 함수, [변화하는지 지켜볼 값(Dependency)])

• 함수 그 자체를 저장하여 재활용
• 디펜던시 값이 변화하지 않으면 함수는 재선언되지 않음
• 해당 함수를 props로 받는 하위 컴포넌트의 리렌더링을 방지

✨React.memo()

export default React.memo(컴포넌트)

• React.memo로 감싼 컴포넌트는 부모컴포넌트로부터 전달받는 props의 값이 변화하지 않으면, 부모컴포넌트의 리렌더링이 일어나도, 리렌더링 되지 않음
• props로 함수를 전달받는 경우 해당 함수에 useCallback을 함께 사용해주어야 효과가 있음

✨주의점

• 각 최적화 hook의 dependency값으로 들어가는 요소가 많아질수록 최적화는 진행하는 의미가 없음.
• 최적화 hook을 남발하는 경우 오히려 메모리 낭비로 이어질 수 있음
• dependency값이 비어있는 hook은 적절하나, 하나 이상의 dependency가 들어가는 경우 사용을 한번 더 고려해보자

dependency를 비운 useCallback() 작성법

1. dependency를 비우지 않은 useCallback()

const [userInput, setUserInput] = useState('');

const onChange = useCallback(e => {
    const { name, value } = e.target;
    setUserInput({...userInput, [name]: value});
  },[userInput])

2. dependency를 비운 useCallback()

const [userInput, setUserInput] = useState('');

const onChange = useCallback(e => {
  const { name, value } = e.target;
  setUserInput((prev) => ({...prev, [name]: value}));
},[])

(setter함수 사용 시, 이전 state를 인자로 받아서 사용)

🧡최적화 라이브러리

✨lodash / debounce

• $ yarn add lodash

• input태그의 onChange 혹은 스크롤 이벤트와 같이 짧은 시간안에 너무 많은 함수의 재호출이 일어나는 경우 사용

• lodash의 debounce를 사용하면, 지정한 함수의 마지막 호출로부터 지정한 시간동안 함수의 재호출이 일어나지 않는 경우에만 함수가 실행된다

  debounce( 실행할 함수 , 500 )

• 위와 같이 작성한 경우 마지막 함수 호출로부터 500ms동안 함수의 재호출이 일어나지 않는 경우 함수 실행

✨react-window / FixedSizeList

• $ yarn add react-window

• 한 화면에 너무 많은 컨텐츠가 업로드되어야 할 때 사용

• 지정한 화면의 크기안에 들어오는 양의 컨텐츠만 먼저 렌더링 되도록 함

• 넘치는 데이터는 스크롤의 위치에 따라 필요할 때 렌더

✨사용법

import React from 'react'
import { userData as users } from '../data/users'
import { FixedSizeList as List } from 'react-window'

function Users() {
  return (
    <List width={500} height={500} itemSize={50} itemCount={80}>
      {({index, style}) => 
        <div key={users[index].id} style={style} >
          {users[index].name}
        </div>
      }
      </List>
  )
}

export default Users

1. import { FixedSizeList as List } from 'react-window' 로 컴포넌트를 불러옴

2. 컴포넌트에 데이터가 보여질 창의 크기를 지정하는 width, height
   각 데이터가 차지할 높이itemSize, 아이템의 갯수 itemCount 를 설정
   <List width={500} height={500} itemSize={50} itemCount={80}></List>

3. 컴포넌트 내에 함수를 넣고 해당 함수의 인자로 index와style를 객체분해할당으로 받아옴

4. 함수안에서 데이터를 사용해 컴포넌트를 꾸며주는데, map()을 사용하는 대신 인자로 받은 index를 활용한다

5. 함수 내 최상단 요소에 인자로 받은 style을 적용시켜줌

✨lazy loading

• 리액트는 초기 로딩과정에서 전체 컴포넌트를 한번에 불러오는데, 페이지 전환이 빠르다는 장점이 있지만 초기 로딩시간이 오래 걸린다는 단점이 있음

• lazy()는 특정컴포넌트가 나중에 불러와지도록 분리

기존 컴포넌트 import방식

import UserList from './components/UserList';

function App() {
  return (
    <UserList />
  )
}

lazy 방식

import { lazy, Suspense } from 'react';

const UserList = lazy(() => import('./components/UserList'))

function App() {
  return (
    <Suspense fallback={컴포넌트}>
      <UserList />
    <Suspense>
  )
}

- 만약 lazy컴포넌트가 로드되기 전에 해당 컴포넌트를 불러와야 할 때, 로드가 완료 될 때 까지 suspense의 fallback안의 컴포넌트를 먼저 불러와서 보여준다.
(fallback안에 로딩이미지를 보여주는 컴포넌트를 불러오는 방식을 사용할 수 있음)

✨lazyWithPreload

• $ yarn add react-lazy-with-preload

• 특정한 이벤트가 발생했을 때, 지정한 컴포넌트를 불러옴

• 컴포넌트.preload()를 호출했을 때, 해당 컴포넌트를 불러온다

import { lazyWithPreload } from "react-lazy-with-preload";

const UserList = lazyWithPreload(() => import('./components/UserList'))

function App() {
  const [isClicked, setIsClicked] = useState(false)

  return (
    <div>
      {isClicked && <UserList />}
      <button onMouseOver={() => UserList.preload()} onClick={() => setIsClicked(true)}
      >userlist표시</button>
    </div>
  )
}

• 버튼에 MouseOver했을 때 UserList컴포넌트를 불러오고, Click했을 때 해당 컴포넌트가 보여지도록 함

✨redux최적화 / createSelector

• 한 컴포넌트 내에서 특정 state가 변경될 때 마다, useSelect내의 state변경이 전혀 없음에도, 매번 useSelect의 리렌더가 발생하는 문제가 발생

• createSelector는 state값을 저장하여, 값이 변할때만 useSelector가 렌더링 되도록 함

// reducer.js
export const memoizedSelector = createSelector(
  state => state,
  value => value
)

• useSelector에서 memoized된 Selector를 불러와서 사용하면 해당 현상이 해결됨

  const count = useSelector(memoizedSelector);