re-render에 너무 목매지 말자

애니메이션 작업을 하고 있었다. react-spring 라이브러리를 사용했다. transition 사용시 주의해야 할 점은

map을 통해서 render 할때 transtion에서 준 속성을 통해서 그려야 한다는 점이다. 다른 속성을 넘겨줘서 그리면 의도치 않은 애니메이션 효과가 발생하게 된다.

 

최근에 react 개발도구에서 re-render시 화면에 깜빡이는 라인이 제거되어 릴리즈되었다. 리액트 개발자는 re-render에 너무 연연하지 말고 구축하는게 좋다는 의미에서 제거했다고 한다. 하지만 github에서 토론되는 모습을 보면 많은 개발자들이 아쉬워하고 해당 기능을 다시 포함시키길 원하는 모습이다.

 

프로젝트를 진행하면서 나도 개발툴에서 깜빡이는 모습을 줄이기 위해서 최적화를 많이 시도했다. 자체 컴포넌트의 state 보다는 redux store를 이용해서 props로 전달하도록 구축했다. 그러다 보니 추상화되는 부분이 많아지면서 설계가 직관적인 모습에서 한참 벗어나게 되었다. 간단한 상태값도 redux store를 이용하다보니 오버 엔지니어링 되는 경우가 잦았고 단순한 작업을 해도 많은 보일러 플레이트를 작성하는 경우가 많이 생겼다. 만약 새로운 개발자가 와서 본다면 직관적이지 않은 형태로 인해서 극심한 러닝 커브에 시달릴게 분명해 보였다.

 

최근 몇몇 아티클에서 re-render에 신경쓰기 보다는 단순함을 유지해서 설계하도록 추천한다. re-render 이전에 react 자체의 비교 알고리즘 성능과 re-render 성능을 믿고 개발하라는 뜻으로 보인다. react 개발도구에서 re-render의 화면 깜빡이 기능이 빠진것을 보면 같은 맥락에서 진행된 것을 알 수 있다.

 

성능에 치중하다 보면 자칫 코드가 복잡해지고 직관성이 떨어져 이해하기 힘들어지곤 한다. 이는 유지보수를 힘들게 하는 원인이 되므로 주의해야 한다. 결국 성능과 유지보수가 균형을 이루는 선에서 작업해야 한다. 실력이 훌륭한 개발자들의 집단에서는 성능에 더 치중해도 되지만 모두가 비슷한 실력이 아니며 성능이 크게 중요하지 않다면 직관성을 높이는 코드 작성이 필요시 되어 보인다.

 

추가

크롬 개발도구의 메뉴들 중 Elements 메뉴에서 볼수 있는 dom 구조는 react의 변화를 잘 관찰할 수 있다. re-render되었는지 아니면 unmount 후 new-render 되었는지를 대략적으로 확인할 수 있다. React memo는 전달된 props에 변화가 없다면 이전에 render된 컴포넌트를 반환해서 변화를 주지 않는다. 컴포넌트 내부 로직이 복잡하고 과중할 때 유용하지만 그렇지않다면 차라리 react reconciliation 알고리즘에 맡기는게 더 합리적이다.