react, redux를 사용하는 코딩 패턴에 대한 고찰

chance·2020년 6월 10일
0

내가 제안했던 코딩 패턴:

container가 state를 가지고 redux에 dispatch, mapstateToProps로 상태 업데이트를 담당한다. ui를 담당하는 컴포넌트를 자식으로 둬서 렌더링한다.

Rerendering problem

shouldComponentUpdate 함수가 true이면 컴포넌트는 상태를 업데이트 한다. Component의 shouldComponentUpdate 함수는 default 반환값이 true이기 때문에 virtual dom에 container가 포함하고 있는 모든 ui를 모두 다시 그린다. 실제 dom에 virtual dom의 업데이트 된 내용을 적용하는 과정에 비하여 virtual dom에 다시 그리는데 필요한 cpu 자원은 크지 않지만, 변화가 필요없는 부분을 다시 그리는 작업을 방지해주는 것이 좋다.

Productivity goes away

우리 프로젝트에서는 container의 자식 컴포넌트에 shouldComponentUpdate를 구현하여 변화가 없는 자식 컴포넌트를 다시 그리는 것을 방지하여 성능 개선을 한다고 생각해보자. container를 만들 때마다 자식들에 shouldComponentUpdate를 추가해야만 한다. 생산성이 크게 떨어지는 일이다. 따라서 차라리 한 페이지당 container를 한 개만 만들지 말고 container를 필요할 때마다 UI 컴포넌트의 계층 사이에 추가해서 그 컴포넌트만 virtual dom에 그려지도록 하는게 성능 측면에서 더 나은 방법이라는 결론을 내렸다.

프로젝트 회의

  1. presentational과 container를 분리하기로함. 기능상 분리가 유리할거라 판단하였다.
  2. container는 필요할 때마다 생성(여러개)

결론

하나의 container components만으로 한 페이지에 필요한 UI를 모두 구성해서 사용하는 것은 좋지 않다. 내가 제안했던 코딩 패턴에 따르면 virtual dom에 변화가 없는 container의 자식까지 다시 그리기 때문이다.

참고

부모를 업데이트하고 자식이 변하지 않게 하는 방법 - stackoverflow
virtual dom - velopert.com

profile
프론트엔드와 알고리즘을 주로 다룹니다.

0개의 댓글