리액트를 왜 쓰는가?

📌 React, Vue,  Angular, Svelte의 공통적인 목적

웹에서 웹 페이지가 아닌 SPA(Single Page Application)를 만든다.

 

📌 웹 페이지

웹 페이지라 하면 네이버, 다음을 생각하면 된다. 각각의 페이지들이 명확하게 나누어져있는 사이트들이다.

 

📌 SPA (Single Page Application)

SPA는 웹에서 모바일 앱처럼 앱 같은느낌이 나는 사이트들이다. SPA는 실제로 기존의 웹 페이지보다 더 많은 기능을 제공한다. 그래서 복잡하고 어려워졌다. 이게 프론트엔드 개발자가 나온 이유이기도 하다.

 

SPA의 예시로 Gmail, 웹 액셀,웹 파워포인트,웹 워드들을 생각하면 좋다.

실제로 Gmail을 사용하면 웹 사이트가 아니라 하나의 애플리케이션같은 느낌을 받을것이다.

 

웹에서 단순한 웹 페이지가 아닌 어플리케이션을 돌릴 수 있게 된 것이다.

그래서 웹 애플리케이션의 수요가 엄청 늘어났는데, 이걸 전통적인 jsp,jQuery,자바스크립트 로만 만들려하면 매우 복잡하다.

뭐가 복잡하냐면 웹 애플리케이션은 웹 페이지에 비해서 데이터들이 엄청많다.

엑셀을 생각해보면 엑셀 한칸한칸이 다 데이터인데 그 칸의 데이터를 바꾸면 실제 화면도 바뀌어야한다.

여기서 중요한것이 "데이터를 바꾸면 화면도 따라서 바뀐다." 이게 당연한 듯 보이지만 실제로 구현하기가 엄청 어렵다.

그래서 이 문제를 해결하기 위해 React, Vue,  Angular, Svelte 이런 SPA 프레임워크들이 나왔다.

SPA 프레임워크들이 주목적으로 하는게 무엇이냐면 프론트에서 데이터를 갖고있고 그 데이터를 바꾸면 화면도 알아서 바뀌는것이다.

 

SPA 프레임워크들 중에서 React는 페이스북에서 개발했다. 페이스북이 페이스북 앱을 만들때 똑같은 문제를 겪었다.

페이스북 앱이 너무 복잡한데 거기서 데이터 하나 바꿨더니 어느쪽에서는 그 데이터 따라서 바뀌는데 다른쪽에서는 데이터가 안바뀌는 것이었다. 예시로 내가 닉네임을 바꿨는데 페이스북 앱 화면에서 어떤 게시글에서는 바뀐 닉네임을 표시해주고  다른 게시글에서는 내가 단 댓글이 있다고 치면 그 댓글에 옛날 닉네임이 표시해주고 있는것이다. 닉네임을 바꿨으면 모든 게시글, 댓글에 바꾼 닉네임이 떠야되는데 그렇지 못하는 현상이 발견이 됬다. 그래서 페이스북은 전통적으로 mvc패턴을 사용해서 만든 웹 사이트를 버리고 React를 만들어서 데이터와 화면의 불일치 문제를 해결했다.

 

React, Vue,  Angular, Svelte의 차이는 데이터와 화면의 불일치 문제를 다 각자 다른 방식으로 해결한 것이다.

 

 

👍 리액트의 장점

리액트를 사용하는 이유는 복잡한 웹앱에서 데이터와 화면의 불일치 문제를 쉽게 해결해준다.

그래서 간단한 문서같은 웹 사이트들은 리액트를 쓸 필요가 없다. 그래서 아직도 jQuery는 많이 쓰인다.

 

👎 리액트의 단점

리액트를 무조건 도입한다고 해서 장점만 있는게 아니다. 

리액트는 거의 자바스크립트로만 이루어져 있다보니까 검색엔진 노출 같은데에 어려움이 있을 수 있다.