개발자
회사에서 Fetching 한 데이터를 위에서 가공 후에 Table Component에 주입을 하는 로직을 개발을 했습니다. 만약 데이터(행)가 100개이고 열의 개수가 9개일 경우 900개의 데이터를 주입을 하면 될 것으로 생각을 했고, 렌더링 속도에 문제가 없을 것으로 예상을 했습니다. 근데 렌더링 시 약 3초 정도의 연산 속도가 걸리게 되었고 console을 찍어보니 객체 안에 다른 많은 값이 있는 것을 알게 되었습니다. 1. Table에 가공된 데이터를 주입 시에 어떤 형식으로 데이터를 주입을 시켜야 할까요? 2. 만약 Table에서 하나의 Column 값만 바꾸고 싶다면 테이블 전체 렌더링이 아닌 다른 어떤 방식을 사용하실 건가요? 3. TableDataType도 맞게 작성을 했는지 잘 모르겠습니다. 4. 추측 상으로 Styled Component도 렌더링 속도 저하의 문제가 되는 것 같은데 렌더링 속도 저하 원인에 대한 정확한 이유를 아직 파악하지 못했습니다. (주입하는 데이터 형식의 문제인 것 같은데 1번과 이어지는 질문이기도 합니다)
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 02월 09일
1. React에서 데이터를 주입할 때, 대부분의 경우 배열 형태로 전달하고 각 요소는 행에 해당합니다. 각 행은 해당 열에 따른 속성을 포함한 객체입니다. 예를 들어: ```js const data = [ { column1: 'value1', column2: 'value2' }, // First row { column1: 'value3', column2: 'value4' }, // Second row // ... more rows ]; ``` 2. 열의 하나의 값만 변경하고 싶다면, 상태 관리 라이브러리(예를 들어 Redux)나 React의 Context API와 같은 도구를 사용해서 상태를 관리하는 것이 좋습니다. 이렇게 하면 테이블 전체를 다시 렌더링하지 않아도 됩니다. 3. `TableDataType`이라는 것을 보여주진 않으셨지만, 일반적으로 각 열에 해당하는 필드가 있는 객체 타입을 말하는 것으로 추측됩니다. 4. 스타일드 컴포넌트가 성능 저하의 원인일 수 있습니다. 만약 많은 양의 동적 스타일링이 이루어진다면, 이것은 추가적인 연산을 필요로 합니다. 또한 컴포넌트 구조와 렌더링 최적화 방법 등을 잘 파악하지 못한 경우에도 성능 이슈가 발생할 수 있습니다. 일부 데이터를 업데이트하면 전체 테이블을 다시 렌더링하는 대신, React의 `Virtualized` 라이브러리 같은 도구를 사용하여 특정 부분만 업데이트하는 방법을 고려해보시기 바랍니다. 이것은 서버에서 가져온 대량의 데이터를 효과적으로 처리하기 위한 것입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!