나는 어떤 프레임워크 또는 라이브러리를 사용할 때 무슨 문제를 해결하는데 중점을 두고 있는지 우선적으로 살펴 보는 편이다. React 가 기존 프론트엔드 생태계의 어떤 문제를 해결하고 현재 프론트엔드 3대장(Vue, angular, react) 중에서도 왜 가장 많이 쓰이고 있는지 간단히 알아보자.
시간이 지나고 점점 방대해지는 Web Application 을 효율적으로 관리하게 위해 SPA(Single Page Application) 개념이 등장했다. 그 전까지는 페이지 별로 HTML, CSS, Javascript 파일을 가지고 있어야 했으며 페이지가 변경될 때 마다 HTML, CSS, Javascript 를 다시 불러와야 했고 렌더링 속도가 느릴 수 밖에 없었다. SPA 가 등장하면서 페이지가 처음 로드될 때 HTML, CSS, Javascript 를 1번만 불러오고 이후에는 Javascript 로 특정 DOM 을 조작하거나 Ajax 등을 통해 데이터를 가져 온다.
하지만, 이것도 잠시 사용자가 늘어날수록 DOM 들을 제어하고 관리하는데 더욱 많은 피로감을 느끼게 되었고 데이터의 관리 또한 어렵게 되었다. 이를 해결 하기 위해서 구글에서 Angular 를 만들었고 페이스북에서도 비슷한 문제를 겪고 있어 개발한 것이 React 다.
React 의 특징을 간단하게 살펴보면
- 순수 HTML 및 Javascript 로 작성할 때 보다 적은 코드량
- Virtual DOM 사용. (이전 UI를 메모리에 유지한 후 변경 된 부분만 실제 돔에 반영 -> 충분히 빠른 렌더링 속도!)
- 자동으로 업데이트 되는 UI (state 변경 시)
- Component 단위로 개발. 레고 블록을 조립하는 느낌.이로 인해 재사용성이 높음
이 외에도 더 많은 특징이 있으며 React 에서 Virtual DOM 이 작동하는 알고리즘(heuristics)에 대한 개념도 한 번 알아볼만하다.
약 8개월 동안 React 를 사용해 사내 프로젝트를 개발해 오면서 느낀점은 처음 배우기에는 쉽지만 제대로 사용하기에는 많이 어려웠다. 재사용성이 높게 코드를 작성하는데 많은 시행착오를 겪었으며 성능을 최적화 하는 부분도 생각보다 고려해야 할 점이 많았다. 예를 들어 어떤 state 가 변경 되었을 때 내가 원하지 않는 부분이 re-render 가 되는 점. 그리고 React 를 사용하면 보다 편하게 데이터 관리를 어떻게 할 수 있을지 고민해 보아야 한다는 점. (사내 프로젝트는 처음에는 Redux 와 Redux-saga 를 사용했지만 지금은 Redux 를 점점 걷어내고 SWR 을 도입하고 있는 중...) 결론은 React 를 더 많이 사용해보고 더 많이 시행착오를 겪어보면서 더 좋은 품질의 코드를 만들어 나가는 것이 React 를 제대로 사용할 수 있도록 이끌어 줄 것이라고 믿는다.
최근댓글