리액트란 무엇일까?
React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
페이스북에서 개발되었으며,
주로 웹 애플리케이션의 화면을 효율적으로 구성하고 관리하기 위해 사용된다.
여기서 말하는 '효율'이란, UI 요소를 컴포넌트 단위로 나누어 재사용할 수 있게 관리하는 것을 의미한다.
리액트의 특징을 정리하면 아래와 같다.
- UI를 컴포넌트 단위로 분리하여 개발
- 재사용 가능한 구조
- 상태 기반 렌더링
- 가상 DOM을 통한 성능 최적화
- SPA 개발에 적합
SPA란?
- SPA: Single Page Application
- MPA: Multi Page Application
2010년 대에 접어들면서 SPA가 주목받기 시작했다.
SPA의 약자에 Application이 포함된 이유는, 모바일 앱의 등장으로 Application이 발달했고 그로인해 모바일 형태에 맞춰나왔기 때문이다.
SPA가 등장하기 이전의 웹의 형태는 MPA이라고 불리운다.
사실 일반 웹일 뿐인데, SPA의 등장으로 MPA란 별칭이 붙게된 셈이다.
리액트를 왜 사용할까?
기존 자바스크립트 방식에서는 아래와 같이 DOM을 직접 조작해야 했다.
document.getElementById("title").innerText = "Hello";위와 같이 DOM을 조작하였을 때, 상태 관리와 유지보수가 어렵다는 단점을 극복하기 위해
React는 DOM을 직접 조작하지 않고 상태가 바뀌면 UI를 자동으로 업데이트한다.
컴포넌트
리액트의 핵심 개념은 컴포넌트이다.
컴포넌트는 UI를 구성하는 독립적인 단위이며,
재사용 가능한 블록이라고 볼 수 있다.
function App() {
return <h1>Hello React</h1>;
}UI를 하나의 파일에서 모두 관리하면 코드가 길어지고,
재사용 불가능하며 이로 인해 유지보수 어려워진다.
리액트를 활용하면 Header Footer Card Button과 같은 UI 요소를 컴포넌트로 관리할 수 있다.
리액트의 동작 원리
리액트는 다음 흐름으로 동작한다.
- 초기 렌더링
- 상태 변경 발생
- 가상 DOM 생성
- 이전 DOM과 비교(diff)
- 변경된 부분만 실제 DOM에 반영
가상 DOM
가상 DOM은 실제 DOM을 메모리 상에 복사한 구조이다.
실제 DOM 조작은 브라우저 렌더링 비용 발생하고, 성능 저하를 야기한다.
때문에 리액트는 가상 DOM에서 변경 계산을 통해 변경된 부분만 실제 DOM에 반영한다.
최소한의 DOM 변경으로 성능을 최적화하는 것이다.
