React.js vs Vanilla.js

사람들은 리액트를 무조건 써야지!!!! 하지만 왜 써야하는지는 정작 물어보면 잘 알지 못한다. 나도 그랬었다. 그래서 오늘 알아볼 것은 React.js와 Vanilla.js의 차이가 뭔지 비교하면서 왜 React를 써야하는가에 대해서 알아 볼 것이다.

 

우선 한 줄로 리액트를 말하자면

사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이다.

 

근데 이렇다고 해서 왜 리액트를 쓰는가에는 답을 주진 못한다.

 

대표적으로 리액트를 쓰는 사이트를 보면 넷플릭스 같은 곳이 있다. 넷플릭스는 화면 전환이 매우 부드럽고 페이지를 로딩하는 것 같지 않고 빠르게 화면 전환이 되는걸 알 수 있다. 그 이유는 리액트는 SPA(Single Page Application)이기 때문이다. 말 그대로 하나의 페이지로 만든 어플이기 때문에 서버에서 새 페이지를 받으려고 기다리지 않아도 된다.

 

근데 그럼 왜 바닐라 JS보다 더 좋은 것인가? 

가장 큰 이유는 웹 사용자 인터페이스를 더 쉽게 구축해주기 때문이다. 

 

바닐라 JS를 쓰면 HTML 페이지와 그에 연결되는 JS 파일 두가지를 써서 그에 상응되는 코드를 쓰면서 코드가 굉장히 길어지는걸 조금만 써보면 알 수 있다.

하지만 React.js는 단 한개의 JS 파일 안에 HTML 코드와 JS 코드(동적 코드)를 동시에 쓸 수 있는 역할을 한다. 그래서 코드가 굉장히 간단해진다.

 

코드의 길이가 다른 또 다른 이유는 바닐라 JS를 쓴다면 코드를 명령형으로 써서 거쳐야 할 단계를 정의해야하는데

React.js는 목표로 하는 UI 상태를 정의할 뿐 거쳐야 할 단계를 정의하지 않는다!  -> 왜냐하면 리액트는 그 과정을 알아서 파악해 필요한 단계를 수행하기 때문이다.

 

또한 React.js는 UI 업데이트를 리액트 내부에서 자바스크립트로 해주기 때문에 개발자가 target state, state change conditions만 정의하면  리액트가 알아서 해준다!