[React] 리액트를 처음부터 배워보자. — 03. 다시 돌아와서 리액트는 뭘까?
리액트는 UI를 위한 라이브러리이다. -공식 문서
리액트 공식 문서에는 리액트를 위와 같이 표현하고 있습니다. 많은 블로그, 많은 강의에서도 리액트를 공식 문서에서 정의해놓은 문장으로 소개하고 계시더라구요.
사실 리액트가 이제는 기본 소양이고 프론트엔드 개발자라면 누구나 사용할 줄 알아야 하기 때문에 단순히 사용법만을 배우기만 했지 리액트가 어떤 부분을 해결해줬는지, 어떤 힘든 부분을 쉽게 처리해줬는지 이해하지 못했기 때문에 UI를 어떻게 위하는지, 그래서 리액트를 왜 쓰는지?에 대한 저만의 정의가 필요하다고 생각하게 되었습니다.
Interface는 의사소통을 편리하게 해주는 어떠한 매개체라고 이해하고 있습니다. 가령 우리가 복잡한 컴퓨터의 내부 생태계, 그 구현이 어떻게 되어있는지 모르지만 키보드의 'a'가 적힌 버튼을 클릭하면 'a'가 입력이 되고, 쿠0에서 주문하기 버튼을 클릭하면 상품의 결제와 주문이 이뤄지듯이 이러한 인터페이스(여기선 버튼)를 통해 사용자가 키보드나 쿠0 웹페이지와 손쉽게 의사소통을 할 수 있도록 도와주죠.
그럼 User Interface는 과연 뭘까요. 단순히 유저가 붙은것이고 리액트는 최종적으로 컴퓨터 어플리케이션을 만들어주기 때문에 이는 유저랑 컴퓨터 어플리케이션의 의사소통을 편리하게 해주는 인터페이스가 되겠네요.
유저는 컴퓨터 어플리케이션과 현실세계의 언어를 사용해서 의사소통하지 않습니다. 현실세계의 언어를 모방한 화면의 요소들을 통해 사용자의 의도를 입력하고 화면에 그 의도의 결과를 출력합니다. 때문에 저는 UI를 사용자를 위한 화면에 보이는 다양한 요소들이라고 정의하겠습니다.
그러면 어떻게 화면의 요소들을 위할 수 있을까요? 이에 대한 힌트를 다양한 영상과 블로그의 글을 읽으면서 조금의 힌트를 얻을 수 있었습니다.
결국 React는 자바스크립트 라이브러리입니다. 라이브러리는 간단하게 자주 사용되는 자바스크립트 코드를 모아둔것이죠. 브라우저는 자바스크립트 엔진을 통해 이 커다란 자바스크립트 코드를 실행시키게 될텐데, 문제는 자바스크립트 코드가 실행되는 중에는 브라우저는 UI 업데이트를 할 수 없다는 것입니다.
일반적인 모니터는 1초에 60번의 화면 갱신을 하기 떄문에 사용자 입장에서 이질감 없이 부드럽게 화면을 보여주기 위해서는 최소 1초에 60번의 화면 갱신이 일어나야 하고, 이는 다시말해 최소 16ms 마다 화면을 업데이트 할 수 있어야 합니다.
반면, 우리가 작성한 코드가 실행 시간이 오래 걸려 16ms 이상의 시간이 소요된다면 사용자 입장에서 마치 화면이 뚝-뚝 끊기는 경험을 하겠죠. 프론트엔드 개발자는 이런 UI 업데이트가 충분히 빠르게 이뤄질 수 있도록 다양한 최적화 기법을 사용해야 했습니다. 그러기 위해서는 사용자의 인터렉션에 대해 어떤 요소가 변화해야하는지를 파악하고 그에따른 요소의 상태 또한 개발자가 직접 관리하는 것은 매우 복잡하고 어려운일이 되었을 것입니다.
리액트는 바로 이러한 복잡성을 해결해주었다고 이해했습니다. 리액트는 자체적으로 DOM Element를 React Element라는 요소로 관리하여 UI 업데이트 작업을 내부적으로 스케줄링하고, 대규모 업데이트에도 16ms를 초과하지 않도록 작업함을 통해 개발자가 UI 업데이트가 언제 어떻게 일어나야할지에 대한 복잡한 일을 대신 처리해 줬기 때문입니다.
덕분에 개발자는 UI 업데이트라는 무거웠던 짐을 리액트를 활용하여 조금이나마 덜고 사용자가 실제 보는 인터페이스인 요소들을 개발하는데 집중할 수 있게 되었습니다. 이렇게 해서 리액트는 UI를 위한 라이브러리.라고 정의될 수 있지 않았나 생각합니다.