왜? 리엑트를 왜 사용하는가?
1. React는 Component기반의 UI라이브러리
컴포넌트화를 한다는 것은 공통적으로 사용하는 것을 따로 만들어서 필요할 때마다 꺼내 사용하는 방식을 의미한다.
컴포넌트 처럼 사용하는 이유는 많은 곳에서 중복적으로 같은 코드를 사용하는 것을 방지하기 위해서 사용하는 것이 가장 큰 목적이라고 할 수 있겠다.
중복 코드가 많아지면 많아질수록 필요에 따라 수정사항이 발생할 때 중복되는 코드를 수정하기 위해 소요되는 시간이 많아지기 때문이다.
이렇게 하나의 문제로 여려곳을 수정해야하는 것을 [산탄총 수술(Shotgun Surgery)]라고 불리기도한다.
하지만 기존에 사용하는 Vanilla JS를 사용하면 컴포넌트화를 하여 관리하기가 힘들 수 있다. 이러한 불편함으로 인해 탄생한 것이 바로 React이다.
React는 Component기반의 UI라이브러리라고 부른다.
2. 선언형 프로그래밍 방식
기존방식 Vanilla JS에서 기능을 추가, 변경 같은 이벤트를 수행하기 위해서는
요소를 찾고, 변경하고, 반영하고... 같은 여러 정해진 절차에 맞추어 하나씩 일일이 지정 하는 명령형 프로그래밍을 사용하였고 대표적으로 JQuery가 있다. 이러한 개발 방식을 했을 때의 불편한 점은 절차를 하나하나 전부 나열 해야하는 불편함과 코드의 양이 길어져 가독성도 떨어지게 된다.
그렇기 때문에 목적에 대한 것을 선언하여 해당 기능을 수행하는 선언형 프로그래밍 방식이 나왔다. 대표적인 기술로 React가 있다.
3. Virtual DOM (가상돔)
해당 기술을 알기전에 DOM 이라는 것 부터 알아야 할 것이다.
DOM(Document Object Model)
=> 웹 브라우저가 HTML을 해석하여 트리형태로 표현해주는 객체
일반적으로 자바스크립트를 사용하여 HTML 요소를 추가하는 작업을 수행한다고 하면
내부적으로는 많은 절차를 거치게 된다.
적은 횟수면 상관이 없겠지만 많은 양의 추가 작업을 거치게 되면 결과적으로 성능저하의 원인이 될 수 있다.
이 문제를 해결하기 위해 Virtual DOM이 탄생하였다.
Virtual DOM을 사용하는 이유로는 위에서 설명한 것처럼 자바스크립트로 요소를 추가하는 과정에서 발생하는 변화를 실시간으로 DOM으로 업데이트를 하는것이 아니라 가상의 DOM(가상이기 때문에 렌더링을 하지 않는다) 으로 먼저 수행한 뒤 한번에 실행할 수 있는 양을 모아 한번에 실제 DOM으로 옮겨 반영하는 과정을 수행한다.
이렇게 하면 변경사항을 일부를 모아서 한번에 반영하기 때문에 실시간 반영보다는 과다현상을 해결할 수 있다.
이러한 장점으로 인해 React를 현재 Front End 시장에서 많이 사용하고 있다고 한다.
