리액트란?
SPA에서 UI를 만드는 라이브러리로, UI 기능만 제공하기 때문에 다른 SPA를 제작하는 앵귤러와 같은 프레임워크에 비해 부족한 부분이 있다.
따라서 전역 상태 관리, 라우팅, 빌드 시스템등 추가적인 라이브러리를 사용하여 구축해야한다. (각자의 환경에 맞게 최적화 가능하지만, 신경 쓸 것이 많기 때문에 초심자에게 높은 진입 장벽이 될 수 있다.)
왜 리액트와 같은 프런트엔드 라이브러리 / 프레임워크를 사용할까?
가장 큰 이유 중 하나가 UI를 자동으로 업데이트 해주기 때문이다. 리액트와 같은 도구를 사용하지 않으면 DOM을 직접 업데이트해야하고, 이는 코드를 잘 관리하지 않고, 프로그램이 커질 수록 복잡도가 증가한다.
리액트의 특징 및 장점
가상 돔 (Virtual DOM)
가상돔은 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술이다. 불필요한 UI 업데이트를 줄이고, 성능은 좋아진다(UI를 빠르게 업데이트할 수 있다).
실제 DOM을 처리하는 건 비용이 많이 들고 느리다. 처리해야할 데이터가 많아지면 더 많은 부담이 된다. 데이터가 업데이트되면 전체 UI를 가상돔에 리렌더링을 하고, 이전 가상돔에 있던 내용과 현재의 내용을 비교하여 바뀐 부분만 실제 돔에 적용한다.
단방향(Unidirectional) 데이터 흐름 & FLUX
리액트에서 데이터는 단일 방향으로 흐른다. 이렇게 데이터 흐름을 단방향으로 제한함으로써 데이터를 추적과 디버깅을 쉽게 해준다.
Flux는 데이터가 단방향으로 흐르는 것을 유지해주는 패턴이다.
컴포넌트 기반
컴포넌트 단위로 만들어 UI를 구성한다. 가독성이 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용에 용이하다.
SEO 호환
서버와 클라이언트 사이드 렌더링 지원을 통해 브라우저측의 쵝 렌더링 딜레이를 줄이고 SEO 호환이 가능해진다.
호환
리액트는 프레임워크가 아닌 라이브러리이기 대문에 다른 프레임워크와 혼용이 가능하다.
정리
- 리액트는 SPA에서 UI를 만드는 라이브러리
- UI만 만들기 때문에 라우터와 같은 기능은 추가적인 라이브러리 사용해야한다.
- DOM을 직접 업데이트하지 않아도 자동으로 UI를 업데이트해주는 것이 리액트의 가장 큰 장점이다.
- 특징으로는 자바스크립트와 XML을 합친 JSX를 사용한다는 것과, 디버깅과 추적에 용이한 단방향 데이터 바인딩 사용과, 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술인 가상돔을 사용한다. 이로인해 불필요한 UI 업데이트를 줄이고, UI를 빠르게 업데이트할 수 있다. 또한 컴포넌트 단위로 만들어 UI를 구상하는데, 이는 가독성, 쉬운 유지보수, 간편한 UI수정 및 재사용에 용이하다.
참고
https://hyejin-dev.tistory.com/3
https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
