React 개요 및 프로젝트 작업 환경 Setting

현재 근무를 하고 있는 사내의 기술 포지션이 React(front-end),express(Back-end),MongoDB(database)로 사용이 되면서 지금은 back-end개발을 담당하고 있지만 앞으로 front-end 영역까지 업무 전달이 될것 같아 React를 공부를 해야겠다라고 생각을 했다. 이번 기회에 front-end 개발을 경험할수 있는 좋은 기회라고 생각하여 열심히 공부를 하려고 합니다. 

 

React 를 공부를 하기전에  HTML,CSS,Javascript 내용을 복습을 해었고 React를 공부하면서 Javascript의 부족한 부분이  있으면 그때 마다 공부하는것으로 생각을 하고 있습니다. 

 

이번 블로그에서는 React 처음 공부하면서 왜 사용을 하면 React 렌더링의 원리인 VirtaulDOM 그리고 React 프로젝트 환경 세팅에 대한 글을 정리해 보았습니다.

 

1. React 는 왜 사용하나요 ? 

 

2. VirtualDOM 원리

 

3. React 프로젝트 작업 세팅 (vscode)

 

1. React는 왜 사용하나요? 

---

왜 React를 써야하는가. 자바스크립트만으로 모든것을 만들기란 쉽지 않아 자바스크립트로 만들어진 수많은 프레임워크(Backbone,Angular,Derby,Jquery등)가 있습니다. 하지만 보통 프레임 워크라고 하면 MVC 아키텍처와 MVVM 등의 아키텍처를 사용한다 공통적으로 Model과 View가 있다는 점입니다. 하지만 리엑트는 View 만을 사용합니다. 기존 웹페이지에서 변화가 생길시 기존 View를 날려버리고 새로운 View를 받아와 화면서 표시를 하게 됩니다. 문제는 변화가 생길때 마다 View를 새로 렌더링 되기 때문에 이벤트가 발생할때 마다 페이지 전체가 렌더링이 됩니다. 리엑트은 이러한 문제를 VirualDOM을 사용하여 변화되는 상태만 렌더링을 하여 최적화를 합니다.

2. VirtualDOM (가상 돔)

---

실제 브라우저의 DOM에 새로운 것을 넣는것이 아니라  자바스크립트로 만들어진 VirtualDOM을 렌더링 하나서 기존의DOM 과 비교후 실제 변화가 필요한곳에만 렌더링을 하는 구조 입니다. 

 

VirtualDOM

 

그림을 보시면 Virtual DOM에서 변화가 생길시 변화가 된부분만 BrowserDOM에 변화가 생기는것을 볼수 있습니다. 그림만 보았을때 이해하시기 힘드실것 같아 VirtualDOM 관련해서 정말 잘 설명한 유튜브 링크를 남겨드립니다. 

 

React Virtual DOM 이미지 참조 : https://programmingwithmosh.com/react/react-virtual-dom-explained/

React Virtaul DOM 참조 영상 : https://www.youtube.com/watch?v=muc2ZF0QIO4

 

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신 이를 추상화된 자바스크립트를 구성하여 사용하게 됩니다.쉽게 설명하면 실제 DOM의 사본과 같은 느낌인거죠. 리액트에서 데이터가 변화하여 실제 웹브라우저에 DOM을 업데이트 할때 다음 세가지 절차를 진행합니다. 

 

1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리 렌더링 합니다. 

 

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

 

3. 바뀐 부분만 실제 DOM에 적용합니다. 

주의할점 

Virtual DOM을 사용한다고 해서 사용하지 않았을때 보다 무조건 빠른것은 아닙니다. 리엑트토 결국 적절한 곳에 사용해야 리엑트가 가지고 있는 진가를 비로소 확인을 할수가 있습니다. 이 문장이 의미하는 것은 리엑트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할수도 있습니다. 결국 필요에의해 사용하는거지 무조건 리엑트가 좋다는것은 아닙니다. 오히려 작업이 단순할때는 리엑트를 사용하지 않는것이 더 나은 성능을 보인다고 합니다. 

 

리엑트와 Virtual DOM이 언제나 제공하는건 업데이트 처리 간결성 입니다. UI를 업데이트 하는 과정에서 생기는 복잡함을 해소하고 더욱 쉽게 업데이트가 가능합니다. 

 

3. React 프로젝트 작업 환경 설정 

---

리엑트 프로젝트를 구성하는건 정말 간단합니다.저는 visual studio code 와 Node 로 개발 환경을 구축했습니다. (yarn 을 사용해도 됩니다.)그리고 ESLint,Reactjs Code Snippets extension을 설치하였습니다. 

 

1. ESLint : 자바 스크립트 문법 및 코드 스타일을 검사해주는 도구

 

2. Reactjs Code Snippets : 리엑트 컴포넌트 및 라이프 사이클 함수 작성할때 자동 완성 기능 

 

3. Prettier-Code formatter : 코드 스타일을 자동으로  정리해주는 도구 

 

그리고 저는 react 디렉토리를 생성하여 hello-react 프로젝트를 생성하였습니다. 

 

react 프로젝트 구성

 

npm init react-app hello-react 

 

프로젝트 생성되면 서버 구동 

cd hello-react
npm start

 

 

지금까지 React를 왜사용하며 어떻게 동작되고 작업환경까직 구축하는 내용입니다. 

 

추가적으로 

---

yarn을 사용해서 리엑트 프로젝트를 구성하는 방법도 있습니다. 참고로 저는 MacOS 유저여서 homebrew로 간편하게 설치를 했습니다. 설치 하는 방법은 아래와 같습니다. 

 

yarn 설치 url : classic.yarnpkg.com/en/docs/install/#mac-stable

 

yarn 을 설치후 React 프로젝트를 다운 받아 봅시다 

 

프로젝트 디렉로리를 생성후 터미널에서 다음 명령어를 입력합니다. 

 

yarn create react-app my-app

 

 

다운로드가 끝난후  아래와 같이 Success 가 나오면 React 프로젝트 초기 세팅은 완료 되었습니다. 

 

 

그리고 리엑트 앱은 아래 명령어로 기동하여 봅시다. 

 

cd my-app
yarn start

 

그럼 위에 npm 설치하여 서버를 구동하였을때와 동일한 화면이 출력이 됩니다. 

 

지금까지 React 개요와 프로젝트 작업 설정에 관련하여 블로그를 정리하였습니다. 

 

긴글 읽어주셔서 감사합니다.