성능개선 - useMemo 로 데이터 저장

App.js

import React, { useState, useCallback } from 'react';

import Button from './components/UI/Button/Button';
import DemoOutput from './components/Demo/DemoOutput';
import './App.css'

function App() {
  const [listTitle, setListTitle] = useState('My List');
  
  const changeTitleHandler = useCallback(() => {
  	setListTitle('New Title')
  }, []);

  
  return (
    <div className="app">
      <DemoList title={listTitle} items={ [5, 3, 1, 10, 9] }/>
      <Button onClick={changeTitleHandler}> Change List Title! </Button>
    </div>
  )

}

 

DemeList.js

import React , { useMemo } from 'react'
import classes from './DemoList.module.css'

const DemoList = (props) = {
  const sortedList = props.items.sort((a,b)=> a - b);
  
  return (
    <div className={classes.list}>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item)=>{
           <li key={item}>{item}</li>
         })
      </ul>
    <div>
  
  )
}

export default React.memo(DemoList);

 

Title이 바뀔때마다 sort 다시되는 것 고치고 싶어서 DemoList를 리액트메모로 감싸줬지만 -

DemoList에 props로 주는 배열은 객체이기때문에 부모컴포넌트 App이 재실행되면 메모리상에서 다른 위치에 새로 생성된다.
따라서 새로운 배열이 props로 전달되어 DemoList는 매번 다시 재정렬된다. 

sort는 성능집약적 작업이다. [5 ,3, 1, 10, 9] 라는 같은 배열이 전달됐는데, 같은 배열로 매번 sort 되는 것은 비효율적이다.

 

 

useMemo 사용 

 

App.js

App 에서 배열을 useMemo를 사용해 넘긴다.

  <DemoList title={listTitle} items={ useMemo(() => [5, 3, 1, 10, 9] ,[])}/>

 

함수 외부로 빼와서 useMemo로 호출한 결과를 listItems에 저장하도록 함

import React, { useState, useCallback } from 'react';

import Button from './components/UI/Button/Button';
import DemoOutput from './components/Demo/DemoOutput';
import './App.css'

function App() {
  const [listTitle, setListTitle] = useState('My List');
  
  const changeTitleHandler = useCallback(() => {
  	setListTitle('New Title')
  }, []);

  const listItems = useMemo(() => [5, 3, 1, 10, 9] ,[]);
  
  return (
    <div className="app">
      <DemoList title={listTitle} items={ listItems }/>
      <Button onClick={changeTitleHandler}> Change List Title! </Button>
    </div>
  )

}

 

DemoList.js

DemoList 내에서 useMemo를 사용해 기존의 props의 item 으로 정렬한 리스트를 저장해놓고, 사용한다. 

import React , { useMemo } from 'react'
import classes from './DemoList.module.css'

const DemoList = (props) = {
  const { item } = props; //구조분해할당
  const sortedList = useMemo (()=> {
    return items.sort((a,b)=> a - b);
  
  },[item])
  return (
    <div className={classes.list}>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item)=>{
           <li key={item}>{item}</li>
         })
      </ul>
    <div>
  
  )
}

export default React.memo(DemoList);