Blog

ReactJS 세미나

image

FBDG(https://www.facebook.com/groups/reactist)에서 주최하는 첫번째 meetup을 다녀왔다.

ReactJs를 다룬다고 하길래 신청했고 대기자가 43명인데 다행히 참석할 수 있었다. (사실 막상가보니 대기자여도 갔어도 되는거 같은 분위기이긴 했다..ㅋ) 오늘 다룬 내용은 리액트 전반에 대한 설명과 실사례, 리덕스, 플러스유틸 4가지였다.

* 페이스북은 리액트를 어떻게 만들었나? – 김코딩 님(김훈민)
* 리액트 사용사례 – 아이러니 님(이철희)
* 다같이! 플럭스유틸즈 한바퀴 – 빈센트 님(U-Yeong Ju)
* 역시 리덕스 – 달리나음 님(Leonardo YongUk Kim)

리액트를 써본적도 학습해본 적도 없어서 참석하기 1시간전에 급하게 검색해서 대략적인 개념을 잡고 들어갔다. 미리 말하자면 리덕스는 거의 이해를 못했고.. 플럭스 유틸즈는 이해를 하다 말았다.  그럼에도 가장 처음 발표해주신 김훈민님의 리액트 전반에 대한 설명 만으로도 세미나는 충분히 유익했던 것 같다.

Backbone의 mvc패턴을 이야기 했는데 백본의 경우 Front단에 맞춰 만들어진 MVC패턴으로 서버의 로직을 Front로 매우 많이 가져올 수 있었다고 한다. Rest API와 바인딩하는 API를 제공하여 모델층이 두터워질 수 있으며 백본의 주 기능은 모델에서 상태가 변경되면 이로 뷰의 상태를 갱신하는데 실질적으로 Dom의 업데이트는 jQuery로 처리한다고 한다. (아직 백본을 제대로 사용해보지 않아서 정확하지 않다. ㅜ)

이에반해 React는 오직 뷰만을 위한 컴포넌트다. 이를위해 createElement라는 메소드를 사용해 js에서 DOM을 직접 생성하여 사용한다. 하지만 이러면 기본적으로 인지하고있는 뷰와 동작의 구분이 모호해지며 뷰와 UI로직의 얽히게 된다고 생각할 수 있다. 그리고 마크업을 만들기 위한 소스인데 마크업과는 문법이 달라 개발자가 학습 비용을 지불해야한다. 후자의 문제를 해결하기 위해서는 JSX라는 XML타입의 문법을 사용하는데 이를 사용하면 기존의 마크업형태의 문법을 그대로 사용할 수 있다. 단 class를 추가할때 className이라는 속성을 사용하는등 조금의 차이는 있다. 그리고 전자의 문제는 인식의 차이이다. 이부분은 너무 당연히 여기던 부분이라 조금 놀랐는데 우리가 표현과 동작의 분리를 원칙으로 개발을 하면서 html, js를 파일로 분리하는건 너무 당연한 방법이 되어 의심을 해본 적이 없었다. 그래서 리액트에서 html을 js내에서 생성하고 처리하는게 비합리적이라고 생각하게 되었는데 오늘 김훈민님께서 “과연 html, js의 분리가 관심사의 분리가 맞는가”라는 질문을 하셨다. 훈님님 말로는 이는 기술의 분리이며 실질적으로 파일을 분리하더라도 UI가 변경되면 기능도 변경되는게 일반적인 케이스라며 결국 의존성을 가지게된다고 하면서 리액트는 이런 부분을 기능과 구조가 합쳐진 컴포넌트 단위로 관리하는 방법이 리액트라고 했다. 다른 방식으로 생각하면 오히려 합리적인 부분인 것 같기도 하다. 단점이 있다면 마크업개발자가 유지보수할 때 어려움이 있을 수 도 있다는 점이다. 아무튼 이부분이 리액트의 큰 개념인 것 같다.

리액트는 UI 컴포넌트로 UI 업데이트가 중요한데 model변경시 매번 랜더링하면 매번DOM API를 호출해야하고 reflow, repaint가 빈번하게 발생하여 성능저하를 가져올 수 있는데 리액트는 Virtual DOM을 사용하여 변경된 부분만을 변경하는 방법을 사용하고 있다. 리액트에서 랜더시 실제DOM이 아닌 Virtual DOM요소가 만들어지며 가상돔을 비교하여 처리한다. 이때도 서능이슈를 최소화 하기위하여 비교범위를 동일 레벨의 노드로 한정할 수 있다. 그리고 shouldComponentUpate를 사용하여 최상위 루트에서 상태가 변하지 않도록 처리하여 성능 이슈를 잡을 수 있다. 그리고 선택적 서브트리 랜더링으로 한번 더 성능 이슈를 개선할 수 있다.

사전 지식이 거의 없이 듣긴 하였지만 뷰만을 담당하는 프레임워크로 다른 라이브러리들과 잘 조합하여 사용하면 좋을 것 같다. 백본먼저 학습하고 리액트도 찾아봐야겠다.

준비한다고 고생많이 하신 것 같은데 그만큼 도움이 많이 되었습니다. 감사합니다~