[React] React를 배워야하는 이유

2024-07-26

많은 프론트앤드 라이브러리나 프레임워크가 있다. 그 중에서도 리액트를 우리가 왜 배워야하는지 알아보자.

React를 배워야하는 이유

상위 1만개의 웹사이트중 42%는 React JS를 사용하며, 특히 Facebook, AirBnB, PayPal, Netflix 등 큰 기업들 대부분은 리액트를 사용중이다.

페이스북, 넷플릭스, 에어비앤비의 웹사이트가 리액트로 돌아가고 있다는 말은 그 기업들에게 리액트는 매우 중요하다는 의미이다.

페이스북이 React JS 를 만들었고 지금도 React JS를 지원하고 있다. 세계에서 가장 유명한 소프트웨어 솔루션의 핵심 기술인것만으로서 웹 개발에 React.js를 사용해야 하는 충분한 이유가 될 수 있다.

React JS는 Javascript 라이브러리이다. JavaScript와 아주 가깝기 때문에, Reat JS로 하는 작업은 일반 Javascript로 하는 작업과 유사하다. 그러므로 Javascript의 커뮤니티를 빌려온 셈이라고 할 수 있다.

또한, React JS를 기반으로 제작된 프레임워크들도 존재한다. 대표적으로 React Native는 안드로이드나 IOS 어플을 React JS코드로 만들 수 있게 해준다.

React JS를 배우면 어디에든 쓸 수 있다는 의미이다.

페이지의 모든 요소들을 컴포넌트 단위로 모듈화해서 사용학; 떄문에 중복 코드가 발생하지 않고 유지보수가 용이하다.

업데이트는 사용자의 행동에 따라 웹페이지가 스스로 모습을 바꿔 상호작용 하는 것을 말한다.

리엑트는 선언형 프로그래밍이다. 즉, 과정은 생략하고 목적만 간결히 명시한다.

리액트는 State 변수 값의 변화에 따라 화면 업데이트를 구현할 수 있다.

Critical Rendering Path(CRP) 는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다.

Dom이 수정되면 화면 업데이트가 일어나는데 Layout(Reflow), Painting(Repaint) 과정은 매우 오랜 시간이 소요되고 JavaScript로 DOM을 많이 수정 할수록 성능이 매우 악화된다.

React는 위 문제를 해결하기 Virtual DOM을 이용한다.

DOM을 자바스크림트 객체로 흉내낸 것으로 일종의 복제판이라고 생각하면 된다.

React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해본다.

React는 상태 변화가 일어날 때마다 Virtual DOM을 이용해 변경 사항을 메모리에 먼저 반영하고, 그 후 실제 DOM에 필요한 최소한의 변경만을 적용한다.

Reference