React 왜 쓰는겁니까?
React는 페이스북에서 만든 JS라이브러리다. React를 왜 쓰냐고 물어본다면 페이스북에서 react를 왜 만들었는지 생각해보면 된다. 페이스북은 거대한 서비스이다. 하루에만 엄청난 데이터가 로드, 삭제 되고 사용자들은 데이터들을 주고 받는다. 이러한 거대한 데이터들을 쉽게 관리하고 처리하기 위해 만들었다. React는 MVC 프레임워크가 아니다. Model, view, Controller 중에 리엑트는 view만 제공한다. 즉 사용자의 인터페이스를 쉽게 만들기 위한 라이브러리이다.
또한 React는 가장 사랑 받는 기술이다. 사용자가 많다는 말은 커뮤니티가 활성화 되어 있다는 말이고, 그만큼 정보공유가 활발하게 이루어 지고 있다는 것이다.
1. Component형 화면구성
스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.
화면 구성을 Component로 나눠서 구성하기 때문에 상태관리나 수정이 용이하다.
2. Virtual dom
우리는 변화된 정보만 업데이트 합니다. 그래서 더욱 빠릅니다.
기존에는 DOM(Document Object Model)을 조작해서 브라우저에 화면을 나타내는 형식이었다. DOM 자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다. 그래서 리액트는 가상 DOM를 이용해서 실제 DOM를 조작하는 횟수를 줄여서 성능을 빠르게 개선하였다. 리액트에서 가상 DOM을 이용하는 방식은 다음과 같다. 데이터가 변경되면 리액트는 가상 DOM를 다시 변경한다. 그리고 이전의 가상 DOM과 비교해서 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용한다. 이러한 리액트의 랜더링 방식은 DOM 전체를 매번 리랜더링했던 이전 방식의 비해 빠르며 애플케이션의 규모가 클수록, 데이터의 변경이 많을수록 더 큰 힘을 발휘한다.
3. Single Page Application
하나의 HTML ! 그래서 더욱 빠릅니다.
기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에 리소스를 전달 받아 해석한 뒤 화면에 보여주었다. 요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 이러한 방식은 비효율적이다.
그래서 React 같은 라이브러리 혹은 프레임워크를 사용하여 View렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 어플리케이션에서 사용할 수 있다.
4. 선언형과 간결성
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.
선언형코드는 가독성을 높혀줄 뿐만 아니라 관리를 용이하게 해줍니다. 누구나 이해하기 쉽게 만들어진 코드들은 팀 단위로 작업을 할 때 빛을 발휘합니다. 개발은 혼자하는게 아니잖아요 !
생각해보기 🧐
- react는 Controller를 제공하지 않는다. 그렇기 때문에 상태관리를 해주는 Redux를 이용해야 되는데, 이때 장점과 단점..?
- 가상Dom에 업데이트를 하는것과 실제 Dom에 업데이트를 할때, 성능차이가 얼마나 나는지.최적화와 관계...?
잘 읽었습니다 :)