React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
Why React.js
첫 번째 이유
페이지마다 중복되는 코드가 있을 경우에 중복되는 부분의 어떠한 부분을 변경해야 한다면 중복 코드가 존재하는 파일 모두를 다 수정해줘야 한다. 이 현상을 산탄총 수술(Shotgun Surgery)이라 한다. 중복된 코드가 별로 없다면 다행이지만 만약에 많다면 시간도 들고, 또 실수를 해서 다른 부분에 복붙을 했다면..? 이러한 이유로 중복된 코드가 많으면 유지보수가 힘들다는 단점이 있다.
그럼 중복된 코드를 없게 작성하면 되지 않을까?라고 생각할 수 있겠지만 현실적으로 그건 힘들다. 우리가 자주 사용하는 웹 사이트만 봐도 중복적인 요소나 프레임을 어렵지 않게 볼 수 있다.
그럼 어떻게 해결하라고?
바로 공통적인 부분(대표적으로 header나 nav, footer)을 별도의 파일이나 모듈(또는 컴포넌트)로 제작해놓은 뒤에 필요한 페이지마다 컴포넌트를 호출하는 방식으로 사용할 수 있으며 이 방식을 컴포넌트화 방식이라 한다. 이렇게 컴포넌트화 방식으로 페이지들을 구현한다면 중복되는 부분에 수정사항이 생겼을 때 해당 컴포넌트만 수정하면 유지보수가 쉬워진다.
React와 무슨 연관?
React는 Component 기반의 UI 라이브러리이기 때문에 html 요소들을 컴포넌트로 만들어서 재사용할 수 있는 기능을 가지고 있다.
두번째 이유
페이지를 만들 때 기존에는 명령형 프로그래밍으로 작성되었다. 명령형 프로그래밍은 절차 하나하나를 다 나열해야 하는 방식이므로 과정이 너무 복잡하다는 단점이 있다.
이와 반대로 선언형 프로그래밍이 있는데 선언형 프로그래밍은 그냥 목적을 바로 말하는 방식이다.
페이지에서 plus 버튼을 누르면 숫자가 증가되고, minus 버튼을 누르면 숫자가 감소하는 동작을 만들자고 치면 명령형 프로그래밍은 다음과 같은 과정을 거친다.
- 결과를 표시할 요소를 가져온다.
- 현재 결과값을 10진수 기준, 숫자형으로 변환해서 가져와 current라는 상수에 저장한다.
- current 상수에 저장된 값을 결과를 표시할 요소의 값에 plus라면 +1 해서 넣고, minus라면 -1 해서 넣는다.
반대로 선언형 프로그래밍의 과정은 다음과 같다.
- plus를 누르면 result 값에 +1한다. minus를 눌렀다면 -1 한다.
명령형 프로그래밍 방식으로 웹 서비스를 설계하는 대표적인 기술은 jQuery가 있고, 선언형 프로그래밍 방식으로 웹 서비스를 설계하는 대표적인 기술은 react이다.
세 번째 이유 - Virtual DOM
DOM?
Document Object Model의 약자로 브라우저가 실제로 사용하는 객체를 의미한다.
Virtual DOM?
가상 돔이다.
DOM은 페이지에서 새로 생성되거나 수정되거나 삭제되거나 할 때마다 연산 작업을 일으키고, 또 새로 변경된 내용에 대해 랜더링을 해줘야 한다. 그래서 DOM의 연산 작업이 많으면 많을수록 성능 저하가 될 확률이 높아진다. Virtual DOM은 이러한 문제를 해결할 수 있다. 페이지에서 새로운 돔이 계속 추가가 되어도 일단 가상으로 DOM을 추가해 랜더링 과정이 필요 없도록 한다. 그러고 나서 가상 돔을 다 모아 한 번에 업데이트 처리를 시킨다. 즉 10번 할 업데이트를 1번으로 줄였다고 생각하면 된다.
