성능 이슈 관련해서 문의드려요

Question

강사님 안녕하세요. 강사님 강의가 좋아서 몇 번을 돌려보고 있는 지 모르겠습니다. 좀 더 실무에 활용할 수 있는 리액트 두번째 강의도 만들어 주시면 안될지요? ㅎㅎ 오늘은 강의에서 적용하셨던 Antd 의 다양한 요소를 함께 적용해 보고 있는데요. Antd 의 Form 에 다양한 요소들(Input, Select, Radio 등) 을 담아서 양식 등록하는 화면을 만들어 보고 있습니다. 만약 Form 안에 많은 항목들이 담긴 양식을 하나 개발한다고 가정해보겠습니다. 양식의 모든 요소들은 Redux 를 사용하여, 강의님이 설명해주신 dispatch(SetValue(...)) 와 useSelector 를 사용하여 연동을 시키구요.. 이럴 경우, form 의 한 가지 요소만 값이 변경해도 양식 전체의 가상돔이 리렌더링이 발생할 듯 한데요.. 혹시 양식의 요소가 많아질 경우, 양식을 하나의 컴포넌트가 아닌 여러개의 컴포넌트로 분리시키는 것이 중요할 지 궁금합니다. (한번에 저장되는 양식이라 할지라도) 쪼갠 컴포넌트들이 재활용 가능성이 전혀 없는 Component 라 할지라도 성능을 고려하여 state 의 변화에 따른 렌더링의 범위를 줄이기 위해 하나의 양식 컴포넌트를 여러 개로 쪼개야만 하는 것인지.. 이런 부분들이 공부하면서 어려운 점이네요.. 조언을 부탁드리겠습니다.

이재승 · Answer

네 그 경우에는  fetchSaveMenu 에서 처리하는 게 괜찮은 선택인 것 같아요

아리마 · Answer

저도 적절한 단위로 쪼개고 싶은데 "상품 등록" 같은 페이지를 구성할 때, 입력해야 하는 항목이 50개가 있다고 가정할 경우,
주제 단위로 컴포넌트로 나눠놓았더니 "저장" 이벤트 시점에 모든 항목들의 Validation 을 처리하기가 어렵더군요.
컴포넌트가 여러 곳에 나눠져 있으니 개별적으로 접근해서 체크하기가 쉽지가 않았습니다.

혹시 이럴 경우, 여러개로 쪼개진 컴포넌트의 값들을 Redux 로 한군데 모아서 Validation 처리를
fetchSaveMenu 같은 Saga 함수 내에서 처리를 해야할까요?

이재승 · Answer

아리마님 안녕하세요 강의에서도 언급했지만 기본적으로 미리 성능 최적화를 하는 것은 추천하지 않습니다 개인적인 생각으로는, 90% 이상의 프로젝트에서 성능 최적화는 사치라고 생각합니다 그럼에도 불구하고 성능 최적화가 반드시 필요한 프로젝트라고 가정한다면, 말씀하신대로 렌더링 범위를 줄이기 위해서 컴포넌트를 쪼개는 것이 효과가 있습니다. ` form 의 한 가지 요소만 값이 변경해도 양식 전체의 가상돔이 리렌더링 ` 이라고 하셨는데요 전체 상태값을 최상위 컴포넌트에서 읽어들이는 상황을 말씀하신 것 같아요 성능 최적화가 필요할 정도로 복잡한 프로그램에서는 컴포넌트를 적절한 단위로 쪼개는 것이 매우 중요합니다 이건 성능뿐만 아니라 코드 가독성에도 큰 영향을 끼치기 때문입니다 각 컴포넌트의 역할을 분명히 한다면, 상태값도 그에 따라 자연스럽게 분배가 될거에요 그렇게되면 필요한 부분만 리렌더링되게 할 수 있습니다