[마소393호] 사용자 중심의 프론트엔드 리액트16+

입력 2018.07.26 08:01 | 수정 2018.07.26 09:19

프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 정적 타입, 리액트, 뷰, 앵귤러, 일렉트론, ESNext 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]

리액트(React) 공식 홈페이지(www.reactjs.org)에 들어가면 가장 첫 화면에 ‘리액트는 UI를 만들기 위한 자바스크립트 라이브러리다(A JavaScript library for building user interfaces)'라고 적혀있다.

프레임워크가 아닌 라이브러리로서, 리액트는 UI 개발을 돕기 위해 나왔다. 컴포넌트를 조립해 화면을 구성하고, 상태(데이터)의 변화가 생명주기를 따라 한 방향으로 흘러 변화해야 할 부분만 바꾼다. 이 리액트의 특징은 처음 나왔을 때는 마냥 신기했지만, 지금의 모던 프론트엔드 개발을 하는 우리에게는 익숙한 개념이 됐다.

페이스북(Facebook)의 리액트 코어팀(이하 코어팀)은 ‘Beyond React 16’을 이야기하며 ‘사용자’를 이야기했다. 초점을 개발자가 아닌, 리액트로 만들어진 결과물을 접하는 사용자에게 맞춘 것이다. 각자 사용하는 프레임워크나 라이브러리와 관계없이, 프론트엔드를 개발하는 모두가 머리를 맞대고 고민할 부분이 바로 사용자 관점이다.

댄 아브라모프(Dan Abramov) Redux 창시자의 Beyond React 16 발표. / JSConf 유튜브 갈무리
‘Beyond React 16’ 발표에서 먼저 나온 주제는 네트워크와 기기 성능에 대한 사용환경이다. 다양한 화면 크기, 성능, 네트워크 속도까지 사용자가 정보에 접속하는 환경은 다양해지고 있다. 이런 환경 변수들로 인해 사용자의 서비스 경험도 달라질 수 있다. 느린 기기로 느린 네트워크에서 접속한다면, 화면은 평양냉면처럼 뚝뚝 끊기고 반응 속도는 느릴 것이며, 사용자는 화를 내며 ‘닫기’ 버튼을 찾을 것이다.

사용자 모두가 최신 기기와 좋은 네트워크 환경을 가진 것이 아니기 때문에 환경 변수로 발생하는 사용자 경험 문제는 해결하기 어렵다. 코어팀은 이런 문제 해결에 리액트가 도움이 될 수 있는지 고민했고, 그 결과물로 ‘타임 슬라이싱(Time Slicing)’과 ‘서스펜스(Suspense)’라는 개념을 제시했다.

타임 슬라이싱은 CPU 측면에서 접근한 방법이다. 렌더링 시 우선순위가 높은 작업이 낮은 작업으로 인해 영향을 받지 않게 도와준다. 렌더링 중 쓰레드(Thread) 작업을 막지 않되 마지막 렌더링 상태만 표시하는 것이다. 이를 통해 우선순위가 낮은 쿠키 목록 부분의 렌더링 빈도가 줄어, 우선순위가 높은 클릭 버튼 및 이벤트 처리에 주는 영향이 줄어든다.

서스펜스는 I/O 측면에서 접근한 방법이다. ‘비동기 데이터’를 불러오는 동안 다른 상태의 변화를 일시 정지시킨다. 네트워크 속도가 빠르다면 로딩을 거치지 않고 바로, 속도가 느리다면 로딩을 거친 후 상태가 변화된다. 우선순위에 따른 동적인 로딩 또한 더 쉽게 구현할 수 있다.

이찬희 필자의 리액트16+에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.