HTML, CSS, JavaScript에 대해 복습을 하였으니 이제는 React의 시간이다.
React는 현 실무에서 가장 많이 사용되는 기술 스택이라고 해도 과언이 아닐 것이다.
그렇다면 실무에서는 이 React를 왜 쓰며 어떻게 등장하였는지 알아보자.
React의 등장
React는 Facebook(현 meta)에서 만들어진 자바스크립트 라이브러리이다.
당시의 개발은 DOM 직접 조작 방식으로 코드가 진행되어야 인터렉티브한 웹을 만들 수 있었다. 하지만 이는 복잡성과 코드의 유지보수 비용 증가라는 큰 문제점이 있었다.
이때 Facebook은 복잡한 UI와 상태관리를 효율적으로 처리하기 위해 UI는 상태에 따라 결정되는 선언형 UI를 철학으로 React가 개발되었다.
React의 요소
React는 처음 접하는 순간 새로운 확장자 파일을 보게 될 것이다.
이는 JSX로 JavaScript에 XML을 합친 문법이다.
해당 JSX를 사용해 컴포넌트를 만들어 기능/구조 등으로 UI를 쪼개고, 이를 재사용하며 단위적으로 추상화하기 시작하였다.
또, 컴포넌트 내부에서의 데이터를 변경하기 위해 State라는 요소를 도입하였고 컴포넌트끼리 데이터를 참조하기 위해 Props라는 외부 전달 읽기 전용 데이터를 도입하였다.
이러한 요소은 결과적으로 복잡한 상태 변화와 렌더링 로직을 명확하게 추상화 해주었다.
Virtual DOM
React의 핵심이라고 해도 무방하다. 이걸로 포스팅을 하나 더 적을 수 있을 정도.
React에서는 사용자가 DOM을 직접 조작하지 않는다.
기본 전제로 브라우저의 'DOM 조작은 느리다'를 깔고가기 때문이다.
그렇기 때문에 React는 가상 DOM을 만들어 비교하고 차이가 있는 부분을 변경한다.
여기서 의문이 하나 생긴다. 결국에 어쨌든 실제 DOM을 조작 해야한다.
결국 DOM을 똑같이 수정하니 성능이 비슷할거고, 오히려 가상 DOM이라는 복사본만 생기니 메모리만 허비하는게 아닌가?
이 점은 React의 가상 DOM을 조금 더 자세히 살펴보자.
우선 가상 DOM은 메모리 상의 순수 JavaScript 객체이다.
실제 DOM Tree를 조작하는 것이 아닌 JS 객체이기 때문에 읽기/쓰기 속도가 빠르고, 짧은 시간 내에 상태가 여러 번 변경되었을 때에 비교가 빠르다.
또, React에서는 짧은 시간 내에 여러 번 상태가 변경되면 해당 변경 내역을 가상 DOM에서만 변화를 누적하고 실제 DOM에는 한 번만 반영한다. 이를 Batch Update라고 한다.
이러한 계산만을 위한 중간계층을 두어 실제 DOM 조작을 최소화하고, 성능의 향상을 이끌어낸다.
추가로 React 16버전 이상부터 Fiber 아키텍처라는 것을 도입하여 더더욱 성능 향상을 이끌어냈다.
Hooks
React를 사용한 사람들은 Hook이라는 것을 사용 안해본 사람이 없을 것이다.
그렇다면 Hook은 어떻게 동작하며 왜 컴포넌트의 최상단에서 호출되어야 하고 순서성을 보장해주어야 하는가?
우선 React의 Hook은 함수형 컴포넌트에서 상태와 생명주기를 효율적으로 관리하기 위해 생긴 기술이다.
React 내부에 저장된 배열 기반의 상태 저장소에 선언된 훅이 순서를 기반으로 동작한다.
useState()를 예로 들어보겠다.
const [stateOne, setStateOne] = useState('');
const [stateTwo, setStateTwo] = useState('');이 코드는 이렇게 봐도 무방하다.
훅저장소[0] = '' //stateOne
훅저장소[1] = '' //stateTwo이 처럼 배열의 순서 기반으로 상태를 매칭하기 때문이다.
만약 조건에 따라 Hook을 호출 한다면 배열 중간에 새로운 훅이 선언되어 index가 밀리는 현상으로 매칭되는 값이 예상과 전혀 다른 치명적인 오류를 낼 수 있기 때문에, eslint-plugin-react-hooks를 통해 이를 방지한다.
한 마디로 이 훅저장소는 하나의 클로저이다.
단방향 바인딩
React에서 상태관리를 해본 적이 있을 것이다.
보통 부모 컴포넌트에서 상태를 선언하고, 자식 컴포넌트에 props를 통해 읽기 전용 상태로 전달한다.
자식에서 상태를 변경하기 위해선 부모에서 선언된 콜백 함수를 props로 내려받아 변경을 호출한다.
이러한 단방향 데이터 흐름을 통해 데이터 변경이 어디서 일어나는지 예측 가능하고, props 추적을 통해 디버깅이 용이하며, 부모 > 자식 관계의 의존을 명확히 하여 리렌더링 제어가 용이하다.
또한, React의 memo 전략을 통한 성능 최적화가 확실하며 구조화된 아키텍처 설계가 가능하다.
그럼 왜 React?
최근까지 React를 대체하기 위해 많은 프레임워크가 도전중이다.
Virtual DOM을 부정하는 Svelte부터 시작해, 양방향 바인딩을 가진 Vue 등등...
그럼에도 아직도 React가 널리 사용되는 이유는 방대한 생태계와 커뮤니티, 대규모 프로젝트에서의 안정성, React 기반의 프레임워크의 진화 등이 있는 것 같다.
