긴 arrayList state 변경시 성능최적화 할수있는 방법을 알고싶습니다.

Question

import { useState } from react; function App() { const [data, setData] = useState([ {text: , num : 0}, * 10000 ]) return (

{data.map((item, idx) => ( ))}

); } const TextTest1 = ({idx, item, data, setData}) => { return (

{ let arr = [...data] arr[idx].text = e.target.value setData(arr) }} /> { let arr = [...data] arr[idx].num = e.target.value setData(arr) }} />

) } export default App; 만약 state값이 const [data, setData] = useState([ {text: , num : 0}, * 10000 ]) 저렇게 array list의 오브젝트가 10000개가있을경우 인풋값을 변경할시 성능이 상당히 느려지는데 혹시 이런경우에 성능을 최적화 할수있는 방법이 있나요?

성원 · Answer

올려주신 코드는 인풋값이 변경될 때마다 10,000번씩 TextTest1를 새로 그려주고있어서 성능이슈가 발생하고있는 것 같은데요, 메모이제이션을 통해 해결하면 될 것 같습니다. TextTest1 컴포넌트를 React.memo로 감싸고, props로 넘겨주던 item={item} data={data}를 변경. data는 setData에서 꺼내올 수 있기 때문에 제거하고, item은 객체이므로 item.text, item.num과 같이 레퍼런스값이 아닌 value값으로 변경해줍니다. 참고용 코드도 첨부할게요! function App() { const arr = Array.from({ length: 1000 }, (v, i) => ({ text: , num: 0 })); const [data, setData] = useState(arr); console.log(data); return (

{data.map((item, idx) => ( ))}

); } const TextTest1 = React.memo(({ idx, text, num, setData }) => { console.log(render); return (

{ const input = e.target.value; setData((prevArr) => { return [ ...prevArr.slice(0, idx), { text: input, num: prevArr[idx].num }, ...prevArr.slice(idx + 1, prevArr.length) ]; }); }} /> { const number = e.target.value; setData((prevArr) => { return [ ...prevArr.slice(0, idx), { text: prevArr[idx].text, num: number }, ...prevArr.slice(idx + 1, prevArr.length) ]; }); }} />

); }); export default App;