react(리액트)란 도대체 뭘까? 왜 쓰는 걸까?

프론트엔드 개발을 하기 위해서 누구나 들어보는 리액트, 리액트의 어떤 기능과 장점이 있길래 쓰는 것일까요?

리액트는 간단하게 말하자면 자바스크립트 라이브러리입니다. 리액트는 컴포넌트라고 하는 html의 구성요소 묶음을 활용해서 재사용성을 높여주고, virtual DOM을 사용하여 효율적으로 리소스를 관리할 수 있어서 많은 프론트엔드 개발자에 사랑받고 있습니다. 

virtual DOM이라고 했는데 DOM에 대해서 알아둘 필요가 있는데요. DOM은 Document Object Model의 약자로 html의 h 태그, p태그, div 태그 등과 같은 엘레먼트, 스타일, 내용에 대해 프로그래밍 언어가 조작이 가능하게 하는 인터페이스를 말합니다. 자세한 설명은 아래 모질라 링크를 참조해주세요.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

다시 돌아와서 이 DOM을 효율적으로 관리하기 위해 리액트는 virtual DOM이란 것을 사용하는데, 먼저 real DOM에서 단순하게 복사를 하고, 업데이트가 발생시에 virtual DOM의 이전 복사본(스냅샷)과 비교를 하여 바뀐 부분만 찾아 real DOM에서 바꿔주는 것입니다. 이렇게 되면 업데이트가 발생했을 때 전체 DOM을 업데이트할 필요가 없어서 필요한 부분만 다시 로드될 수 있습니다.

 

과거에는 리액트 개발 환경을 구축하기에는 정말로 쉽지 않았습니다. 바벨, 웹팩 등을 모두 설치하고 구성을 해주어야 했기 때문인데요. 현재는 create-react-app을 이용해서 빠르게 개발환경을 구축할 수 있습니다. 바벨은 최신 ECMA 자바스크립트 문법을 지원하지 않는 브라우저를 위해서 최신

자바스크립트 문법을 구 버전의 자바스크립트 문법으로 변환시키는 툴이고, 웹팩은 웹페이지를 구성하는 static 파일들(html, js, css)들을 모듈로 보고 번들링 해주는 모듈 번들러입니다. 웹팩은 내용이 아주 방대하기 때문에 간단하게 설명하지만, 아래의 링크에 아주 상세하게 설명이 되어있어 저도 도움을 많이 받았으니 보시는 분들도 많이 참고하시길 바랍니다.

https://joshua1988.github.io/webpack-guide/guide.html

Introduction | 웹팩 핸드북

다음 시간에는 리액트 시작하는 방법에 대해서 말씀드려보겠습니다. 리액트는 노드 환경에서 실행이되므로 nodejs와 npm에 대해서도 같이 알아보는 시간이 되겠네요. 그럼 감사합니다~~~