[React] 리액트 vs 바닐라 자바스크립트 (왜 프레임워크를 쓰는거지?)

---

바닐라 자바스크립트로 개발하는 방식과 리액트 같은 프레임워크를 사용하는 것은 어떤 차이가 있지?

사실 바닐라 자바스크립트로도 클래스를 이용해서 모듈을 만들어 끼워맞출 수 있지 않나? 훅을 이용한다는 것 전에는 결국 바닐라와 리액트와 별 차이가 없었을 것 같다는 생각이 들었다.

render innerHTML로 코드를 조각조각 나누면 그게 컴포넌트 html 렌더링과 다른게 어떤걸까?

개발자 입장에서는 리액트가 유지보수하기 쉽다는데 정확히 왜 사용하는지 생각을 해보지 못한 것 같다.

---

1. 일관되지 않은 코드

 

바닐라 자바스크립트 등 프레임워크를 이용하지 않은 순수 개발은 정해진 규격이 없어 개발하는 사람들에 따라 중구난방식 코드가 짜진다고 한다.

특히 기업에서 협업할 시, 프레임워크의 틀 없이 짜면, 새로 팀에 합류할 사람들이 코드에 적응하기 힘들며 해당 코드를 수정하는 것에 있어서도 진입 장벽이 높다고 한다.

이는 모든 개발에서 프레임워크 사용의 장점이라고도 볼 수 있다.

 

2. 가상 돔

 

리액트는 render -> 가상돔에 결과물 저장 -> 원래 돔과 가상돔의 결과물 비교 -> 달라진 점을 최종 돔에 저장

이는 메모이제이션과 비슷한 전략을 쓴다는 생각이 들었다.

통째로 매번 변화되지 않은 부분까지 불필요하게 렌더링 하는 것과 달리 부분만 연산을 할 것 이기에 속도 면에서 성능이 좋을 것이다.

가상돔이 리액트에서 가장 큰 장점이기도 하다.

하지만, 스벨트라는 새로운 프레임워크는, 이 가상돔자체도 없애버린다고 한다.

굳이 가상돔에 저장하는 단계를 거치지 않고 반응형으로 변화된 부분을 바로 최종 돔에 적용시킨다고 한다.

 

3. 그래도 간단한 컴포넌트

 

물론 자바스크립트에도 class를 지원하여 js 파일마다 호출하여 컨트롤 할 수 있다.

하지만 결국 뿌려지는 화면에서 리액트 컴포넌트들은 자유롭게 몇번이고 <Card />를 적는 방법으로 반복을 줄일 수 있다. map 함수를 사용하고 말고의 문제가 아니었다. 기능을 하는 파일 조각들의 반복에 관한 것 이다.

기본적으로 view, UI를 위한 라이브러리(프레임워크라고 말하기도 하는데 사실은 라이브러리다)인 리액트는 정말 손쉽게 view를 컨트롤할 수 있도록 제작됐다.

 

---

이 기술을 왜 이용하는지 제대로 알지 못한 채 기술을 배우기에만 급급한 것은 기술 이용에 있어서 바람직한 방향이 아니라는 생각이 들었다.

물론 처음 배우는 입장에서 빨리 배우고 구현하고 싶은 마음은 이해가 가지만

진정한 사용 이유를 알고 배운다면 깊은 이해가 따라올 수 있다고 생각한다.

 

---

참고:

리액트를 사용하는 이유

공식 리액트 웹