[React] 컴포넌트의 리랜더링 관련된 고민이 있습니다.

Question

리액트 구현 중 리랜더링에 관한 고민이 있어서 글을 쓰게 되었습니다.간략하게 구조만 코드로 짜느라 문법이나 스펠링 오류가 있을 수 있습니다.export const Parent = (props) => { const [newSequences, setNewSequences] = useState>([]); const appendChild = () => { const seqNo = newSequences.length > 0 ? newSequences.slice(-1)[0].seq + 1 : 0; setNewSequences([...newSequences, { seq : seqNo, removable : true}]; } return ( <> {newSequences.map((seq, i) => ( )} ) }위 상황은 현재 newSequences 배열의 원소 개수만큼 반복문을 돌면서 Child 컴포넌트를 랜더링하는 Parent 컴포넌트입니다.appendChild 함수를 실행하면 newSequence에 새로운 데이터가 뒤에 추가가 되고, state가 변했으니 Parent 컴포넌트가 전체 리랜더링되면서 Child 컴포넌트를 전부 리랜더링합니다.그리고, Child 컴포넌트는 쉽게 말해 설문조사지 같은 역할을 하는 컴포넌트고(앞으로는 설문조사지라고 말하겠습니다.), 무거운 컴포넌트라 30개 이상의 Child 컴포넌트를 전체 리랜더링해야하는 경우가 온다면 서비스를 사용할 수 없을 정도로 랜더링시간이 오래 걸립니다.설명을 좀 더 쉽게 하기 위해 Child는 설문조사지, Parent는 그 설문조사지를 너무 담고 있는 테이블이라 일컫겠습니다.제가 해결하고 싶은 이슈는 이러합니다.설문조사지를 하나만 추가하여 값들을 입력하고 저장하는 것(저장하는 기능은 코드에서 생략)은 상관이 없습니다. 리랜더링이 되어봤자 설문조사지 하나만 리랜더링이 될테니까 말이죠.하지만, 한번에 많은 설문조사지를 추가하고 싶을 땐, appendChild 함수를 호출하는 버튼을 거듭 클릭하여 함수를 여러번 호출해야 하고, 이 함수가 한번 실행될 때마다 newSequences 데이터가 변하므로 전체 리랜더링이 됩니다.그래서 한번에 30개 이상의 설문조사지를 추가하고 싶을땐, appendRow 함수를 실행할때마다 랜더링속도가 뚝뚝 떨어지는 것을 느낍니다. 30번째 appendRow 함수를 실행하는 순간에는 1~29번째 설문조사지가 반복문을 돌면서 전체 리랜더링이 될테니까요..그렇다고 해서 리랜더링을 하지 않을수도 없는 노릇입니다..리랜더링을 하지 않을시, 코드내에서는(newSequences 변수에는) 하나의 데이터가 추가가 되겠지만,UI에서는 리랜더링이 발생하지 않으므로 업데이트된 데이터가 보이지 않기 때문입니다.리랜더링을 안할수는 없고, 그렇다고 리랜더링을 안하자니 브라우저 새로고침을 하지 않는 이상 추가한 데이터가 보이지 않고, 전체 리랜더링의 시간은 오래 걸리고... 고민입니다.물론 또다른 방법을 생각해내긴 했지만, 이 또한 막힙니다.이미 추가된 설문조사지 데이터들만 관리하는 컴포넌트(1번)와, 이번에 추가할 한개의 설문조사지만 관리하는 컴포넌트(2번)를 분리하여, 2번의 컴포넌트만 리랜더링시키는 전략도 생각해봤지만,이 또한 어쨌든 1번의 컴포넌트에 계속해서 새로운 데이터를 붙여줘야 하므로 1번과 2번 모두 리랜더링이 된다는 것은 부정할 수가 없습니다.1번의 컴포넌트에 react.memo를 붙여서 관리를 해도, 혹시나 1번 컴포넌트 내부에서 수정된 사항이 발생하여 값을 하나라도 고치게 된다면 1번 컴포넌트가 리랜더링되어버리기 때문에 이 또한 좋은 해결법은 아닌것같습니다.만약 React.memo와 같은 훅을 사용한다고 하면 어느 시기에 사용을 해야 할지 감이 안 잡힙니다..어떤 방식으로 진행을 해도 막히니 고민입니다. 도움이 필요합니다. 미리 감사드립니다.

페코옹 · Accepted Answer

memo를 쓰시지요.import { memo, useState } from "react"; const Child = memo((props) => { console.log("리렌더링", props.seq); return (

{props.seq} {props.title}

); }); const Parent = (props) => { const [arr, setArr] = useState([]); const handleAppend = () => { setArr((arr) => { const seq = arr.at(-1)?.seq + 1 || 0; return [...arr, { seq, removable: true }]; }); }; return ( <> {arr.map((el, i) => ( ))} ); }; export default function App() { return (

); }

LostStarz · Answer

말씀하신대로Child 컴포넌트를 React.memo로 감싸주면 넘겨받는 props가 변경되지 않았다면 랜더링 일어나지 않습니다.

메이플비 · Answer

설문지 컴포넌트가 얼마나 무거운 컴포넌트인지는 모르겠지만, 일반적으로 저렇게 해서 성능저하가 눈에 보일 정도면 메모아이징 보다는 설문지 컴포넌트 자체에 불필요한 랜더링이 많이 일어나는게 아닌지, 컴포넌트 내부에서 흐름이 비효율적인게 아닌지를 먼저 살펴보아야 할 것 같습니다. 두번째로 한 화면에 너무 많은것을 담는지 아닌지를 봐야합니다.설문지가 무거운 컴포넌트라면 돔트리도 크고 복잡할 것이고, 갯수가 많아지고 이러면 아무리 스크롤 아래에 숨겨져 있다고 하더라도 어쨌든 랜더링을 하는것이다 보니 브라우저가 부담스러워 할 수 밖에 없습니다.일반적으로 프론트엔드 개발자 입장에선 이런 경우가 생기면 virtual list라는것을 통해 해결합니다. 스크롤바 크기나 위치를 보면 모든게 랜더링 되어 있는것 같지만, 눈에 보이는 요소만 랜더링 하는거라 앱이 굉장히 가벼워집니다.

[React] 컴포넌트의 리랜더링 관련된 고민이 있습니다.

3개의 답변

Q&A 목록