개발자

React로 Table 만드는 것에 대한 질문입니다!

2024년 02월 09일조회 70

회사에서 Fetching 한 데이터를 위에서 가공 후에 Table Component에 주입을 하는 로직을 개발을 했습니다. 만약 데이터(행)가 100개이고 열의 개수가 9개일 경우 900개의 데이터를 주입을 하면 될 것으로 생각을 했고, 렌더링 속도에 문제가 없을 것으로 예상을 했습니다. 근데 렌더링 시 약 3초 정도의 연산 속도가 걸리게 되었고 console을 찍어보니 객체 안에 다른 많은 값이 있는 것을 알게 되었습니다. 1. Table에 가공된 데이터를 주입 시에 어떤 형식으로 데이터를 주입을 시켜야 할까요? 2. 만약 Table에서 하나의 Column 값만 바꾸고 싶다면 테이블 전체 렌더링이 아닌 다른 어떤 방식을 사용하실 건가요? 3. TableDataType도 맞게 작성을 했는지 잘 모르겠습니다. 4. 추측 상으로 Styled Component도 렌더링 속도 저하의 문제가 되는 것 같은데 렌더링 속도 저하 원인에 대한 정확한 이유를 아직 파악하지 못했습니다. (주입하는 데이터 형식의 문제인 것 같은데 1번과 이어지는 질문이기도 합니다)

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 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` 라이브러리 같은 도구를 사용하여 특정 부분만 업데이트하는 방법을 고려해보시기 바랍니다. 이것은 서버에서 가져온 대량의 데이터를 효과적으로 처리하기 위한 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!