모드셋 시스템 개발 프로젝트를 마무리 후 페이지 성능 향상을 위해 리팩토링 진행하였다.
1. MUI 라이브러리의 DataGrid 컴포넌트를 사용하여 데이터 테이블을 효율적으로 관리하여 대용량 데이터를 쉽게 처리함
MUI의 DataGrid는 고성능 데이터 테이블 컴포넌트로 복잡한 데이터를 효율적으로 관리하고 시각화 할 수 있습니다. 기본적으로 정렬, 필터링,
페이지네이션, 선택과 같은 기본적인 기능을 내장하고 있어 커스텀 함수를 구현하지 않고도 데이터를 쉽게 탐색하고 상호 작용할 수 있습니다.
2. 객체 상태 관리를 사용하여 상태 간의 의존성을 고려하여 코드의 모듈성과 재사용성을 향상함
같이 관리할 상태를 객체로 관리되도록 구성되며 각 속성이 다른 속성에 의존하는 경우에도 일관성을 유지할 수 있도록 합니다. 추후 리팩토링 혹은
디버깅 시 상태를 쉽게 추적할 수 있습니다. 여러 상태가 의존하는 경우 해당 상태를 독립적으로 관리하면 상태 업데이트 시 연관된 상태도 업데이트
하는 코드가 필요합니다. 그러나 객체 상태 관리를 사용하면 상태를 하나의 객체로 통합하여 특정 상태를 업데이트할때 의존된 다른 상태도 함께
업데이트할 수 있어 코드의 모듈성과 재사용성을 높일 수 있습니다.
3. 공통 컴포넌트로 구조화하여 재사용성과 유지보수성을 향상함
반복적으로 사용되는 UI 요소나 기능을 공통 컴포넌트로 분리하여 코드의 중복을 줄이고 재사용성을 높였습니다. 공통 컴포넌트에 props를 통해
각각 다른 기능을 하는 컴포넌트를 생성함으로써 특정 상황에 맞게 컴포넌트를 확장할 수 있습니다. 또한 추가 개발, 수정을 할 경우 공통 컴포넌트
코드만 수정하여도 전체 코드에 반영되어 유지보수성을 향상시킬 수 있으며. 반복적인 개발 작업을 감소시켜 새로운 화면을 빠르게 구성하여 개발
생산성을 향상시킬 수 있습니다.
4. React의 batch 시스템을 고려하여 불필요한 렌더링을 최소화함
불필요한 렌더링이 일어나 예상치 못한 동작이 발생하지 않도록 고려하여 페이지를 최적화하였습니다. 불필요한 렌더링을 고려하지 않으면 React의
batch 시스템이 동작하여 한 번의 렌더링으로 동시에 변경된 여러 상태를 처리하기 때문에 가장 마지막으로 변경된 상태로 인식하고 원하는 결과와
다르게 동작할 수 있습니다. 만약 상태를 필요한 시점에서만 업데이트하고 싶다면 useCallback과 useMemo를 통해 의존성 관리와 메모이제이션
기능을 통해 의도하지 않은 렌더링이 발생하지 않도록 처리할 수 있습니다.
□ 향후 리팩토링 목표
1. React Hook Form 라이브러리를 사용하여 Form 관리를 간소화하고 성능을 최적화
React Hook Form은 Form을 쉽게 관리할 수 있는 라이브러리입니다. 입력 필드가 많고 복잡한 Form을 상태 관리와 유효성 검사를 수동으로 처리
한다면 많은 커스텀 함수가 필요합니다. 따라서 React Hook Form의 Form 상태 관리, 유효성 검사, 데이터 제출의 기능을 사용하여 복잡한 코드를
개선할 수 있습니다. React Hook Form은 required, minLength, maxLength를 통해 기본 유효성 검사를 쉽게 설정할 수 있는 기능을
제공합니다. 또한 watch를 통해 실시간으로 상태 값을 관찰할 수 있으며 reset을 통해 데이터를 초기 상태로 되돌릴 수 있는 상태 관리를 쉽게 관리
할 수 있도록 해줍니다.
2. React-query를 사용하여 데이터 캐싱 및 데이터 리패칭 기능을 통해 페이지 렌더링 최적화
React Query는 비동기 데이터를 쉽게 관리하고 캐싱, 동기화, 업데이트 기능을 제공하는 서버 상태 관리 라이브러리입니다. 현재 UI 상태와 서버
상태를 모두 useState로 관리하고 있지만, 향후 리팩토링시 UI 상태는 useState로, 서버 상태는 React Query로 분리하여 관리할 계획입니다.
React Query를 사용하면 데이터 캐싱을 통해 렌더링 속도를 최적화할 수 있고, 데이터 리패칭 기능으로 네트워크 요청을 최소화하면서 데이터를
자동으로 새로고침하여 최신 상태의 데이터를 유지할 수 있습니다.
⭐발표자 : 이예은님
모드셋 시스템 개발 프로젝트를 마무리 후 페이지 성능 향상을 위해 리팩토링 진행하였다.
1. MUI 라이브러리의 DataGrid 컴포넌트를 사용하여 데이터 테이블을 효율적으로 관리하여 대용량 데이터를 쉽게 처리함
MUI의 DataGrid는 고성능 데이터 테이블 컴포넌트로 복잡한 데이터를 효율적으로 관리하고 시각화 할 수 있습니다. 기본적으로 정렬, 필터링,
페이지네이션, 선택과 같은 기본적인 기능을 내장하고 있어 커스텀 함수를 구현하지 않고도 데이터를 쉽게 탐색하고 상호 작용할 수 있습니다.
2. 객체 상태 관리를 사용하여 상태 간의 의존성을 고려하여 코드의 모듈성과 재사용성을 향상함
같이 관리할 상태를 객체로 관리되도록 구성되며 각 속성이 다른 속성에 의존하는 경우에도 일관성을 유지할 수 있도록 합니다. 추후 리팩토링 혹은
디버깅 시 상태를 쉽게 추적할 수 있습니다. 여러 상태가 의존하는 경우 해당 상태를 독립적으로 관리하면 상태 업데이트 시 연관된 상태도 업데이트
하는 코드가 필요합니다. 그러나 객체 상태 관리를 사용하면 상태를 하나의 객체로 통합하여 특정 상태를 업데이트할때 의존된 다른 상태도 함께
업데이트할 수 있어 코드의 모듈성과 재사용성을 높일 수 있습니다.
3. 공통 컴포넌트로 구조화하여 재사용성과 유지보수성을 향상함
반복적으로 사용되는 UI 요소나 기능을 공통 컴포넌트로 분리하여 코드의 중복을 줄이고 재사용성을 높였습니다. 공통 컴포넌트에 props를 통해
각각 다른 기능을 하는 컴포넌트를 생성함으로써 특정 상황에 맞게 컴포넌트를 확장할 수 있습니다. 또한 추가 개발, 수정을 할 경우 공통 컴포넌트
코드만 수정하여도 전체 코드에 반영되어 유지보수성을 향상시킬 수 있으며. 반복적인 개발 작업을 감소시켜 새로운 화면을 빠르게 구성하여 개발
생산성을 향상시킬 수 있습니다.
4. React의 batch 시스템을 고려하여 불필요한 렌더링을 최소화함
불필요한 렌더링이 일어나 예상치 못한 동작이 발생하지 않도록 고려하여 페이지를 최적화하였습니다. 불필요한 렌더링을 고려하지 않으면 React의
batch 시스템이 동작하여 한 번의 렌더링으로 동시에 변경된 여러 상태를 처리하기 때문에 가장 마지막으로 변경된 상태로 인식하고 원하는 결과와
다르게 동작할 수 있습니다. 만약 상태를 필요한 시점에서만 업데이트하고 싶다면 useCallback과 useMemo를 통해 의존성 관리와 메모이제이션
기능을 통해 의도하지 않은 렌더링이 발생하지 않도록 처리할 수 있습니다.
□ 향후 리팩토링 목표
1. React Hook Form 라이브러리를 사용하여 Form 관리를 간소화하고 성능을 최적화
React Hook Form은 Form을 쉽게 관리할 수 있는 라이브러리입니다. 입력 필드가 많고 복잡한 Form을 상태 관리와 유효성 검사를 수동으로 처리
한다면 많은 커스텀 함수가 필요합니다. 따라서 React Hook Form의 Form 상태 관리, 유효성 검사, 데이터 제출의 기능을 사용하여 복잡한 코드를
개선할 수 있습니다. React Hook Form은 required, minLength, maxLength를 통해 기본 유효성 검사를 쉽게 설정할 수 있는 기능을
제공합니다. 또한 watch를 통해 실시간으로 상태 값을 관찰할 수 있으며 reset을 통해 데이터를 초기 상태로 되돌릴 수 있는 상태 관리를 쉽게 관리
할 수 있도록 해줍니다.
2. React-query를 사용하여 데이터 캐싱 및 데이터 리패칭 기능을 통해 페이지 렌더링 최적화
React Query는 비동기 데이터를 쉽게 관리하고 캐싱, 동기화, 업데이트 기능을 제공하는 서버 상태 관리 라이브러리입니다. 현재 UI 상태와 서버
상태를 모두 useState로 관리하고 있지만, 향후 리팩토링시 UI 상태는 useState로, 서버 상태는 React Query로 분리하여 관리할 계획입니다.
React Query를 사용하면 데이터 캐싱을 통해 렌더링 속도를 최적화할 수 있고, 데이터 리패칭 기능으로 네트워크 요청을 최소화하면서 데이터를
자동으로 새로고침하여 최신 상태의 데이터를 유지할 수 있습니다.
⭐발표자 : 이예은님