React란?

✔ React란?

React는 페이스북에서 만든 자바스크립트 UI 라이브러리입니다. React Document에도 사용자 인터페이스를 만들기 위한 Javascript 라이브러리라고 소개하고 있습니다. UI 혹은 사용자 인터페이스 UX를 만든다는 것은 사용자들에게 보이는 부분을 그려준다는 뜻이기도 합니다. 그런데 React를 사용하기 전에, 우리는 HTML과 CSS를 통해서 사용자에게 웹을 제공할 수 있었습니다. 이후에 React가 등장하고 사용되는 이유는 무엇일까요?

✔ React를 왜 사용할까?

웹의 뼈대를 이루는 HTML과 웹의 디자인을 담당하는 CSS, 동적 기능을 추가할 수 있는 순수한 Javascript를 통해서 웹을 개발할 수 있습니다. 특히 정적 페이지를 만든다면 React와 같은 라이브러리는 오히려 과유불급이 될 수 있습니다.

 

하지만 현재 웹들을 보면, 정적이거나 단순한 웹보다 웹 애플리케이션이라고 불릴만큼 동적인 부분이 많고 복잡합니다. 그만큼 상태 관리를 많이 해야 하며, DOM 요소를 직접 관리하기가 많이 부담스러워졌습니다. 즉 변화를 시키기 위해서 고려해야 될 점이 많았습니다. 이 부분에서 페이스북은 'Mutation을 사용하지 말고, 데이터가 바뀌면 view를 날리고 새로 만들자'라는 생각을 합니다.

 

발상은 간단했지만, DOM 기반으로 동작하는 웹을 계속 새로운 뷰로 렌더링하는 것은 성능적으로 문제가 발생할 겁니다. 여기서 나온 개념이 Virtual DOM입니다.

✔ Virtual DOM

Virtual DOM은 가상의 Document Object Model을 말합니다. DOM은 HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리합니다. DOM은 HTML 내에 원하는 위치에 접근하기 위한 하나의 방법으로 W3C 표준입니다. React를 사용하기 이전에는 DOM 객체의 변화를 감지하면 DOM을 다시 그렸습니다. 변하지 않은 부분도 렌더링이 다시 되니 성능 이슈가 있었습니다. 

 

이에 React는 Virtual DOM 방식을 채택하여 성능 이슈를 해결했습니다. HTML DOM을 추상화해서 실제 DOM과 비교하고 변화된 부분만 업데이트를 하게 된 거죠. 이 Virtual DOM을 사용함으로써, 데이터가 바뀌었을 때 어떻게 업데이트할지를 고려하는 것이 아니라, 일단 바뀐 데이터로 일단 그려놓고 비교를 한 다음에, 바뀐 부분만 찾아서 바꿔주는 거죠.

 

참조 유튜브 동영상 - https://www.youtube.com/watch?v=muc2ZF0QIO4

✔ React의 또 하나의 특징, Component

React는 Component 기반의 라이브러리입니다. UI를 하나의 큰 덩어리로 생각한다면 Component는 그 덩어리를 이루는 작은 요소들이라고 생각하면 쉽습니다. 하나의 웹 페이지가 Component의 조합인 셈이죠.

 

Component는 코드의 중복을 줄여줄 것이며, 전체 코드를 파악하는데 상대적으로 쉽도록 도와줄 것입니다. 또한 UI가 변화하는데 최적화하기에도 편리함을 줍니다. 그리고 미래의 '나'가 페이지를 수정할 때, 그 유지 보수에도 상당한 편의성을 줄 것입니다.

✔ 데이터 흐름은 단방향

React의 데이터 흐름은 단방향입니다. 단방향 데이터 흐름은 양방향보다 데이터를 감지하는데 부담이 적고 단순한 데이터 흐름으로 이해하기 쉬우며 쉬운 어플리케이션을 만들 수 있습니다.

✔ 언제 React를 사용하면 좋을까?

위에서 소개했듯이 단순한 정적 페이지를 개발하는데 React를 사용하는 것은 큰 이익을 얻을 수 없을 것입니다. 오히려 과하다고 볼 수 있습니다. React는 동적인 웹 애플리케이션에서 큰 도움을 줍니다.

 

사이트 규모가 커지고 동적인 요소가 많아지면서 순수한 Javascript로 상태 관리하기가 힘들다 할 때, React를 생각해볼 수 있습니다. React를 사용하면 Redux, MOBX, Context API 등의 상태 관리 도구를 사용해서 상태를 따로 모아서 관리할 수 있습니다. 프로젝트가 복잡할수록 React의 빛을 볼 수 있을 것입니다.