[React] 리액트 기본개념 (SPA, 리액트 사용방법, 동작방식)

웹사이트나 앱을 이용하다 보면 버튼을 클릭하거나 메뉴를 이동했을 때 화면이 빠르게 변경되는것을 볼 수 있다.

과거엔 페이지를 이동할때마다 서버에서 새로운 HTML을 받아 화면 전체를 새로고침했지만,

최근엔 필요한 부분만 즉시 변경하여 더 빠르고 자연스러운 사용자 경험을 제공하는 React와 같은 프론트엔드 라이브러리를 많이 사용한다.

---

React란?

리액트는 사용자 인터페이스(UI)를 구성하기 위한 JavaScript 라이브러리 이다.

 

리액트의 가장 큰 특징은 화면을 컴포넌트(Component)라는 작은 단위로 나눠 개발한다.

하나의 페이지를 Header, Main, Footer처럼 여러 컴포넌트로 분리하여 개발할 수 있고,

필요한 곳에서 재사용할 수 있어 유지보수가 쉬워지는것을 말한다.

 

또한 실제 DOM을 직접 조작하는 것이 아닌

Virtual DOM(가상 DOM)을 통해 변경된 부분만 실제 DOM에 반영하므로 효율적으로 화면을 업데이트할 수 있다.

---

SPA(Single Page Application)

React는 대부분 SPA(Single Page Application)를 개발할 때 사용된다.

SPA는 하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식이다.

 

기존의 웹사이트(MPA)는 페이지를 이동할때마다 서버에 새로운 HTML을 요청하고 화면 전체를 다시 로드하는 방식을 사용했다.

하지만 SPA는 처음 한 번만 필요한 파일을 내려받고, 이후엔 JavaScript가 필요한 화면만 변경된다.

 

페이지가 이동하는 것처럼 보이더라도 실제로는 전체 페이지를 다시 불러오지 않기 때문에 더욱 빠르고 자연스러운 사용자 경험을 제공할 수 있다.

---

React 프로젝트 만드는 방법

리액트를 사용하기 위해선 Node.js가 필수로 설치되어 있어야 한다.

 

최근에는 Vite를 이용하여 React 프로젝트를 생성하는 경우가 많으며,

아래 명령어를 터미널에서 실행하여 리액트 프로젝트를 생성한 후 npm run dev로 서버를 실행하면 된다.

npm create vite@latest 프로젝트명 -- --template react

 

서버 실행 후 안내된 주소(기본적으로 http://localhost:5173)에 접속하면 React 프로젝트가 실행되는 것을 확인할 수 있다.

---

React 동작원리

리액트는 사용자의 입력이나 상태(State)가 변경되면 화면 전체를 다시 그리는 것이 아니라, 변경이 필요한 부분만 찾아 효율적으로 화면을 업데이트한다.

이 과정에서 React는 Virtual DOM을 활용하여 변경 사항을 비교한 뒤, 실제 DOM에는 필요한 부분만 반영한다.

그래서 불필요한 렌더링을 줄여 성능을 높이고, 복잡한 화면도 효율적으로 관리할 수 있다.