웹 개발 공부를 하는 사람이라면 누구나 한번쯤은 들어봤을 단어 "React"!
React는 무엇이고 우리는 왜 React를 써야하는 알아보겠습니다.
리액트란?
react는 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.
- SPA(Single Page Application)란?
어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA입니다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어납니다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것입니다. 따라서 SPA를 사용하면 새로고침 없이 페이지를 변경할 수 있습니다.
(출처: https://www.excellentwebworld.com/what-is-a-single-page-application/)
리액트를 사용해야 하는 이유
1. Virtual Dom(가상 돔)
리액트는 가상 돔을 사용하여 웹 애플리케이션의 성능을 극대화 시켰습니다.
가상 돔을 이해하기 위해서는 브라우저가 랜더링되는 과정을 알아야합니다. (제 블로그 브라우저 랜더링 파트에 설명되어있습니다.
링크 : https://velog.io/@kjd3495/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-Script-%ED%83%9C%EA%B7%B8-%EC%9C%84%EC%B9%98)
랜더링 과정을 거쳐 표시된 HTML을 자바스크립트를 사용하여 DOM을 조작하게 되면 각 노드의 좌표를 계산하기 위해 레이아웃 과정이 다시 실행되고, 그 이후 색상을 입히기 위한 페인팅 과정이 다시 진행되게 됩니다. 이렇게 DOM 조작으로 레이아웃 과정이 다시 진행되는 것을 리플로우(Reflow)라고 하며, 페인팅 과정이 다시 진행되는 것을 리페인트(Repaint)라고 합니다. 이 리플로우와 리페인트는 DOM의 각 노드에 대한 연산 과정을 다시 수행함으로 이 과정이 많이 수행될수록 웹 서비스의 성능이 저하되는 문제가 발생하게 됩니다.
리액트는 이 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고 DOM 조작이 발생하면 메모리상에 생성한 가상 돔에 모든 연산을 수행한 후, 실제 DOM을 갱신하여 리플로우/리페인트의 연산을 최소화하였습니다.
예를 들어 장바구니에 물품을 추가하는 과정을 수행할때 가상 돔을 사용하지 않으면 물품을 장바구니에 추가할 때 리플로우, 리페인트가 한 번 발생하고 장바구니 결제 금액을 표시할 때 다시 한번 리플로우, 리페인트가 발생하는데 가상 돔을 사용하면 이 모든 과정을 한번의 리플로우, 리페인트로 끝낼 수 있는 것입니다.
2. JSX
리액트에서는 JSX라는 문법을 사용합니다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다.
const App =() => {
const hello = "hello";
return <div>{hello}</div>;
};리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있습니다. JSX는 시각적으로도 직관적일 뿐만 아니라 선언형 프로그래밍을 통해 생산성을 높여줍니다. 특히 유지보수, 협업에 강점을 발휘합니다.
3. 컴포넌트(Component)
컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 서로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다. 이러한 블록을 조립해 하나의 완성품을 만드는 것입니다.
이러한 특징은 하나의 컴포넌트를 여러 부분에서 사용할 수 있게 해줍니다.
예를 들어 버튼, 아이콘등을 여러 곳에서 재사용하고 싶다면 버튼, 아이콘 컴포넌트를 만들거나 import해서 뷰를 구성할 수 있습니다.
import Icon from "./Icon"
const Button = ()=>{
return <button>버튼</button>
} const App () => {
return (
<div>
<Icon/>
<Button/>
</div>
);
};이렇게 작고 고립된 컴포넌트는 재사용을 할 수 있으며 이런 재사용을 통해 개발 생산성을 향상시킬 수 있습니다. 또한 이렇게 작고 고립된 컴포넌트는 테스트하기 쉬워 코드를 유지보수하는데도 크게 도움이 됩니다.
위 내용들을 종합해보면 리액트는 앱과 같은 환경을 웹에서 보여줄 수 있습니다. 즉, 로딩이 없는 듯한 사용자경험을 주게 됩니다. 브라우저상에서도 자연스러운 흐름으로 사용자와 대화형(상호작용) 웹앱이 가능하게 됩니다. 또한 데이터와 화면의 일치, 통일성이 좋아지며 중복되는 요소들을 컴포넌트화 시켜서 유지보수가 쉬워집니다. 이러한 이유들로 우리는 리액트를 사용하여 복잡한 UI를 좀 더 쉽고 효율적으로 구성할 수 있고 때문에 많은 개발자들이 리액트를 사용하고 있다는 걸 알 수 있었습니다.
Reference
https://yong-nyong.tistory.com/13
https://dev-yakuza.posstree.com/ko/react/create-react-app/react/
https://gurtn.tistory.com/96
https://velog.io/@youthfulhps/React-React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0
https://onlydev.tistory.com/12
