TOAST UI

지난 1년 6개월 동안 리액트, 리덕스를 공부하고 활용해 웹 애플리케이션을 개발했다. 지금도 개발하고 있고, 여전히 비동기 처리와 같은 사이드 이펙트(Side effects)를 고민하고 있다. 리액트, 리덕스는 함수의 응용, 순수 함수, 불변성 등 함수형 프로그래밍을 지향한다. 그리고 사이드 이펙트를 원하지 않는다. 하지만 세상일은 뜻대로 되지 않는다는 말을 증명하듯 서비스는 사이드 이펙트 없이 개발할 수 없었다. 사실 처음에는 사이드 이펙트라는 개념도 몰랐다. 그냥 무언가 개발에 어려운 점이 있는데, 그 무언가가 무엇인지 표현도 못 했다.

리액트가 정식으로 릴리즈된 지도 벌써 4년이 훌쩍 지났다. 얼마전 나온 16.0 버전에 이르기까지 내부적으로도 많은 발전이 있었고, 수 많은 리액트 관련 라이브러리들이 나오는 등 외부적으로도 많은 발전이 있었다. 지금은 거의 대세가 되어 버린 리액트이기에 장점을 나열하자면 지루한 내용이 되겠지만, 꼭 짚고 넘어가고 싶은 장점은 4년이 넘게 지나도록 핵심 개념이나 중요 API가 거의 그대로 유지되고 있다는 것이다. 나는 이것이 리액트가 처음부터 추구했던 가치가 시간이 지나도 퇴색되지 않을만큼 의미있다는 것을 입증하고 있다고 생각한다.

React(이하 리액트), Redux(이하 리덕스) 생태계에서 소켓과 같은 외부 이벤트 처리는 개발에 많은 고민을 안겨준다. 똑같은 외부 이벤트가 발생하더라도 앱의 상태에 따라 다르게 처리하고 싶을 수도 있고, 무시하고 싶을 수도 있으며, 앱의 상태와 관계없이 항상 처리하고 싶을 수도 있다. 특히 외부 이벤트가 리덕스의 액션과 연결되는 경우 리덕스의 미들웨어를 통해 액션이 Dispatch 됐다는 것을 알아야 한다. 때문에 단순한 리덕스 스토어의 API만으로는 모든 서비스 로직을 처리하기가 상당히 까다롭다.

Redux는 Event Sourcing패턴과 Functional programming을 결합하여 라이브러리 형태로 구현한 컨테이너다. 이 컨테이너는 애플리케이션의 상태를 저장하고, 쉽게 예측할 수 있도록 하여 일관된 구현을 유지할 수 있도록 하고, 테스트, 유지보수, 디버깅 등을 손쉽게 처리할 수 있도록 한다.

React는 간단하면서도 충분히 빠르다. 하지만 착각하지 말자. 대충 만들어도 빠르다는 것은 아니다. React 애플리케이션은 잘 만들어야 빠르다. React의 동작 원리를 이해하고 애플리케이션이 느려질 수 있는 상황들을 찾아 해결하는 것이 중요하다. 다행히 React는 간단하고 이해하기 쉬운 라이브러리다.

React는 Facebook에서 개발해 Facebook과 Instagram, Airbnb 등에서 사용하고 있는 오픈소스 UI 프레임웍이다. 사용자 액션에 따라 DOM을 일일이 다루었던 과거 개발 방식(jQuery와 같은 라이브러리만을 사용하는)과는 달리 개발자가 DOM을 직접 다루지 않고 React가 데이터 상태에 따라 자동으로 UI를 관리하기 때문에, 개발자는 단순히 특정 상태에 대한 뷰의 변화만 구현하면 된다.

어떤 프로그램을 만들든지, 중복 코드는 자주 나타난다. React 또한 마찬가지로 각 React 컴포넌트에서 중복되는 로직과 라이프사이클을 만날 수 있다. 보통 JS에서 클래스 간 중복 로직은 mixin을 통해 해결하는 경우가 많은데, ES6 class문법에서 React는 mixin API를 지원하지 않는다. (물론 직접 class의 prototype을 수정하는 mixin을 구현하거나, React.createClass의 mixin을 이용할 수는 있다.) 그래서 이런 중복 코드를 다른 방식으로 풀어내고 해결하는 방법을 우선 먼저 찾아봐야 하는데, 그 전에 일단 왜, 도대체 왜 mixin을 지원하지 않는지부터 알아보자.

리액트의 성능 향상을 위한 가이드. 보통의 웹 어플리케이션에서는 한 페이지에 다수의 엘리먼트들을 렌더링한다. 이번 포스트에서 다수 엘리먼트들을 렌더링할 때 어떤 방식으로 성능 향상을 하는지 보여주고자 한다.