React가 핫한 이유, 리액트 개념

웹 개발, Frontend쪽을 해 본 사람이라면 FE framework 3대장인 React, Vue, Angular를 적어도 이름은 들어봤을 것이다. 그 중에서도 React는 가장 많이 쓰이고 있는 프레임워크이며, 그 동안 jQuery라는 친구밖에 몰랐던 javascript의 인간관계는 어느새 많은 변화가 생겼다.

1등으로 치솟고 있는 react

어쩌다 보니 나는 요즘은 웹앱 개발을 많이 하고 있고 오늘 신규 인원들을 위해 React 세미나도 했던 겸사겸사 초심자의 마음으로 돌아가서 React의 기원에 대해 알아보도록 하자.

정말 우연하게도(?) 얼마 전에 방문한 카페 이름이 React였다. 물론 카페의 간판은 Re.act로, 사장님이 개발을 아시기 어려울거니와 가운데에 점을 찍으신 걸로 봐서 가능성은 더더욱 없어 보인다. 하지만 하루종일 React에 시달리다가 퇴근 후에 맛있는 밥을 먹고 간 카페가 React라니, 자조적으로 너무 웃겨서 .js를 붙여 SNS에 업로드 했고 동기들의 반응을 듣는 것도 재밌었던 하루였다.

카페 이름 리액트임. 진짜임.

아무튼 React라는 카페까지 생길 정도로 핫한 React, 그 인기의 비결이 뭘까?

우선 웹 개발에서 떼 놓을 수 없는 HTML로 들어가보자. HTML은 DOM이라는 tree 형태의 문서 객체 모델 인터페이스로 이루어져 있고, 사용자가 새로고침 할 때마다 DOM이 생성되어 사용자에게 뿌려지게 된다.

그런데 페이지의 값이 바뀌거나, 다른 페이지로 이동하거나, 페이지 내 팝업 창이 뜨려면 HTML 구조가 바뀌는데, 사실 모든 값이 바뀌는 것이 아닌데도 통째로 렌더링을 하게 된다. 그리고 처리해야 할 이벤트나 변수가 다양해지게 되면 그에 따라 코드도 복잡해진다. 왜냐하면 기존 javascript는 DOM 접근을 통해서 값을 취득하고 변경하는 방법을 많이 썼기 때문이다.

React는 이러한 불편함을 해결하고자 고안되었다. DOM을 통째로 새로 생성하거나 중간에 비교하여 변경하는 것이 아닌, 특정 'component'의 '상태'가 바뀌었을 때, 그 하위의 DOM만 바꿔치기 할 수 없을까?

Virtual DOM

Virtual DOM이란, 단어 그대로 가상의 DOM으로써 메모리에 담겨 있는 DOM이다. Component내의 상태값이 업데이트 되면, 업데이트가 필요한 곳의 UI를 virtual DOM을 통해서 렌더링한다. 이를 통해서 얻을 수 있는 장점은, 크게 두 가지 정도 된다.

1. 웹 페이지 로딩 속도가 빨라진다.
   실제로 로딩 속도는 앱 사용자 환경에 크나큰 영향을 미친다고 익히 알려져 있다.
2. 유지보수가 쉬워 개발 생산성이 높아진다.
   컴포넌트 단위로 개발함으로써 공용 컴포넌트를 선언해 여러 페이지에 쓸 수도 있고, 부모 컴포넌트를 상속받아 다양한 자식 컴포넌트를 생성할 수도 있다.
   React 사용으로 간결해지는 코드 또한 개발 생산성이 높아지는 이유라고 할 수 있다.

---

그런데 정말 날카로운 질문으로, React를 쓴다 = 빠르다 일까 ❓
이 질문에는 모든 케이스가 그렇지는 않다, 라는 답변을 주고 싶다. Vanilia javascipt로 최적화 작업을 충분히 잘 해놓았다면 당연히 별도 framework를 쓰지 않은 경우가 더 빠를 것이다. 다만 React는 그런 작업이 익숙하지 않아도 쉽게 할 수 있도록 도와주는, framework의 역할을 하는 것 뿐이다. 또한 이 외에도 React에서 제공하는 유용한 함수를 적재적소에 사용하는 방법을 모른다면 큰 의미가 없지 않을까.

다음 포스팅에서 코드와 함께 매력적인 React를 체험해 보도록 하자! 😀😀

 

---

References

https://www.simform.com/blog/best-frontend-frameworks/

Best Frontend Frameworks of 2022 for Web Development

https://react.vlpt.us/basic/01-concept.html

1. 리액트는 어쩌다가 만들어졌을까? · GitBook