인프런 커뮤니티 질문&답변
작성한 질문수
성능 이슈 관련해서 문의드려요
작성
·
246
1
강사님 안녕하세요.
강사님 강의가 좋아서 몇 번을 돌려보고 있는 지 모르겠습니다. 좀 더 실무에 활용할 수 있는 리액트 두번째 강의도 만들어 주시면 안될지요? ㅎㅎ
오늘은 강의에서 적용하셨던 Antd 의 다양한 요소를 함께 적용해 보고 있는데요.
Antd 의 Form 에 다양한 요소들(Input, Select, Radio 등) 을 담아서 양식 등록하는 화면을 만들어 보고 있습니다.
만약 Form 안에 많은 항목들이 담긴 양식을 하나 개발한다고 가정해보겠습니다.
양식의 모든 요소들은 Redux 를 사용하여, 강의님이 설명해주신 dispatch(SetValue(...)) 와 useSelector 를 사용하여 연동을 시키구요..
이럴 경우, form 의 한 가지 요소만 값이 변경해도 양식 전체의 가상돔이 리렌더링이 발생할 듯 한데요..
혹시 양식의 요소가 많아질 경우, 양식을 하나의 컴포넌트가 아닌 여러개의 컴포넌트로 분리시키는 것이 중요할 지 궁금합니다.
(한번에 저장되는 양식이라 할지라도)
쪼갠 컴포넌트들이 재활용 가능성이 전혀 없는 Component 라 할지라도 성능을 고려하여 state 의 변화에 따른 렌더링의 범위를 줄이기 위해 하나의 양식 컴포넌트를 여러 개로 쪼개야만 하는 것인지.. 이런 부분들이 공부하면서 어려운 점이네요..
조언을 부탁드리겠습니다.
답변 3
0
0
저도 적절한 단위로 쪼개고 싶은데 "상품 등록" 같은 페이지를 구성할 때, 입력해야 하는 항목이 50개가 있다고 가정할 경우,
주제 단위로 컴포넌트로 나눠놓았더니 "저장" 이벤트 시점에 모든 항목들의 Validation 을 처리하기가 어렵더군요.
컴포넌트가 여러 곳에 나눠져 있으니 개별적으로 접근해서 체크하기가 쉽지가 않았습니다.
혹시 이럴 경우, 여러개로 쪼개진 컴포넌트의 값들을 Redux 로 한군데 모아서 Validation 처리를
fetchSaveMenu 같은 Saga 함수 내에서 처리를 해야할까요?
0
아리마님 안녕하세요
강의에서도 언급했지만 기본적으로 미리 성능 최적화를 하는 것은 추천하지 않습니다
개인적인 생각으로는, 90% 이상의 프로젝트에서 성능 최적화는 사치라고 생각합니다
그럼에도 불구하고 성능 최적화가 반드시 필요한 프로젝트라고 가정한다면,
말씀하신대로 렌더링 범위를 줄이기 위해서 컴포넌트를 쪼개는 것이 효과가 있습니다.
`form 의 한 가지 요소만 값이 변경해도 양식 전체의 가상돔이 리렌더링` 이라고 하셨는데요
전체 상태값을 최상위 컴포넌트에서 읽어들이는 상황을 말씀하신 것 같아요
성능 최적화가 필요할 정도로 복잡한 프로그램에서는 컴포넌트를 적절한 단위로 쪼개는 것이 매우 중요합니다
이건 성능뿐만 아니라 코드 가독성에도 큰 영향을 끼치기 때문입니다
각 컴포넌트의 역할을 분명히 한다면, 상태값도 그에 따라 자연스럽게 분배가 될거에요
그렇게되면 필요한 부분만 리렌더링되게 할 수 있습니다