웹페이지에 인터랙션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야하기 때문에 코드가 난잡해지는 문제가 발생하곤 한다.
처리해야 할 이벤트도 다양해지고, 관리해야할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하는 업데이트 규칙도 복잡해진다.
리액트는 이러한 문제점을 개선하기 위해 아래와 같은 방법을 사용한다.
View에서 어떠한 상태가 바뀌었을 때 그 상태에 따라 DOM을 어떻게 업데이트 할지를 정하는 것이 아니라, 아예 View를 다 날려버리고 새로 보여주면 코드가 난잡해지는 것을 방지할 수 있지 않을까, 하는 아이디어에서 리엑트가 탄생했다.
SPA (Single Page Application)
사용자가 한 페이지의 머무르면서 새로운 페이지로 바뀔 때 마다 필요한 정보만 추가적으로 받아와 부분적으로 업데이트한다.
- 첫 화면 로딩 시간이 다소 길다는 점이 있다.
- 라우팅에 따라 다른 뷰를 보여줄 수 있다.
가상 돔(Virtual DOM)
DOM을 추상화한 가상의 객체로,
브라우저에 실제로 보여지는 DOM이 아니라 단순히 메모리에 가상으로 존재하는 DOM으로서, 단순한 Javascript객체이기 때문에 작동 성능이 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.
일반적인 브라우저 렌더링 과정으로는
- HTML 파싱 -> DOM 객체 생성 -> CSS 파싱 -> 스타일 규칙 생성
- 위의 과정을 합쳐 실제로 웹 브라우저에 보여줘야 할 'render tree' 를 만든다.
- 이 렌더 트리 기준으로 레이아웃을 배치하고 Paint의 작업을 한다.
이 과정에서 변경될 구성 요소가 바뀌면 전체가 렌더링이 되는데 매우 비효율적이라고 볼 수 있다.
그래서 리액트를 사용하는 이유 중 하나가 바로 Virtual DOM 이다.
리액트는 상태가 업데이트 되면 Virtual DOM은 기존 DOM과 변경될 Virtual DOM의 차이를 판단하고 변경된 구성요소만 찾아 그 부분만 렌더링을 한다.
diffing 알고리즘
위에 설명한 Virtual DOM과 관련이 크다.
변경된 부분만 감지해서 바뀐 부분만 업데이트 하는 방식을 취하게 되는데 이 변경된 부분을 감지하는 것을 diffing Algorihm 이라고 한다.
일반적인 트리 구조의 비교는 O(n^3)의 시간이 소요된다고 한다. 하지만 리액트는 이러한 diffing 알고리즘으로 인해 O(n)의 시간에 해결하고 있다.
key를 사용하는 이유
이것 또한 Virtual DOM과 diffing 알고리즘과 연관이 있다.
하나의 JSX 태그는 자바스크립트 객체로 구성되는데 이 객체에는 해당 객체가 Virtual DOM의 요소임을 확인해주는 심볼값과 각각의 Virtual DOM를 고유하게 구분하는 key 값이 들어가게 된다.
그래서 map 을 사용했을 때, 해당 리스트에 고유한 key값을 넣어줘야한다. 리액트는 이 key들의 비교를 통해 리스트의 요소가 추가되거나 삭제되었을 때 상태를 빠르게 감지하고 반영할 수 있다.
쉽게 말해 엘리먼트 혹은 컴포넌트의 변화를 감지하기 위함이고 이는 효율적인 DOM 사용으로 귀결된다.
환경세팅
Webpack
최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)
모듈 번들러
웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다
사용하는 이유
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- 웹 개발 작업 자동화 도구
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
Prettier
협업을 하게 될 때, 일관성 있는 코드 스타일은 정말 중요하다.
그래서 일관성 있는 코드 스타일 규칙만 설정해주면 알아서 자동으로 그 규칙에 맞게 코드들을 정리해준다.
Babel
최신 문법을 브라우저가 이해할 수 있는 자바스크립트로 통역
브라우저는 JSX를 이해하지 못한다.
그러니 바벨이라는 통역사로 JSX -> Javascript
Eslint
ESLint가 코드 퀄리티를 일관적으로 유지
문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해준다.
Ref
