본문 바로가기
IT/React

React란? React 소개

by 최고영회 2019. 2. 13.
728x90
반응형
SMALL

React는 사용자 인터페이스를 개발하기 위해 페이스북이 개발하여 오픈 소스로 공개한 것으로, 

간결함과 성능 그리고 컴포넌트 단위 개발을 염두에 두고 만들어진 자바스크립트 라이브러리다. 


데이터가 변경되면 이 변경 사항을 반영하기 위해 UI를 갱신해야 한다. 이 과정을 효과적이면서도 쉽게 처리하기란 쉽지 않다. 

React는 바로 이 문제를 해결하는 데 주안점을 두고 있다. 


React의 내부 매커니즘은 컴포넌트의 상태변경과 이를 UI에 반영하는 작업 등에 필요한 복잡한 과정을 처리한다. 이 과정을 처리하는 주요 기법이 

바로 가상DOM 기술이다. 


DOM은 XML문서의 계층 구조를 반영한 트리구조다. 

이 트리구조는 node로 표현되는 자식 구조들로 구성되며 보통 이 구조는 웹페이지와 어플리케이션을 구성하는 div 및 기타 요소들로 해석된다.


DOM을 조작하는 것은 (getElementById, innerHTML....) 상당히 직관적이지만, 대형 웹 애플리케이션을 개발할 때는 꽤 복잡한 작업이 된다. 

React를 통해 개발하면 DOM을 직접 조작할 경우가 별로 없다. 

가장 위에서 언급했듯이 가상DOM을 통해 상태를 변화시키면 알아서 UI에 적용해주는 역할을 React가 대신 해주기 때문에...

React의 이 동작은 메모리의 DOM에서 발생한 변경 사항이 실제 DOM의 변경을 유발한다고 판단되는 경우에만 수행된다. 


가상DOM이 데이터의 변경사항이나 애플리케이션의 변경을 어떻게 처리하는지에 대해 

너무 깊이 있게 이해하려고 노력할 필요는 없다.

우리는 그저 애플리케이션에서 우리가 집중해야 하는 부분에만 더 집중하면 된다. 


React를 이용해 개발한다는 것은 레고를 이용해 뭔가를 만드는 것과 유사하다. 


React는 권장 사례들을 충분히 활용하도록 만들어졌기 때문에 초기에 패러다임 전환에 따른 비용이 필요하지만, 장기적으로는 큰 이득이 된다. 


다음글: 2019/02/22 - [IT/React] - React - 컴포넌트란?

728x90
반응형
LIST

'IT > React' 카테고리의 다른 글

React - 상태 (기본)  (0) 2019.03.03
React - PropTypes (유효성 검사)  (0) 2019.03.03
React - 리액트 클래스 (상태가 있는 컴포넌트)  (0) 2019.02.23
React - 리액트 요소란?  (0) 2019.02.23
React - 컴포넌트란?  (0) 2019.02.22