오늘은 프론트엔드 개발 기술중 한국에서 가장 많이 쓰이는 기술 중 하나 인 React에 대해 알아보려고합니다.
웹페이지를 개발하면서 자주 쓰이는 기술이고 이용했었는데 정확히 무엇인지 특징과 장점 어떻게 활용되는지 알아보겠습니다.
1. React란?
React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용된다. (출처:위키백과)
간단하게 정의하자면, React는 사용자 인터페이스 즉 UI를 만들기 위한 JavaScript라이브러리입니다.
페이스북에서 개발되어 오픈소스로 공개되었으며 전세계적으로 많은 웹 프로젝트에서 활발하게 사용되고있습니다.
특히 한국에서는 React가 점유율이 굉장히 높아 프론트엔드 개발자들이 알아야할 필수 라이브러리중 하나입니다.
*SPA(Single Page Application)개발에 최적화 되어있습니다.
React를 사용하지않아도 html,css, javascript를 이용해서 웹 페이지를 만들 수 있지만 react를 이용해 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있습니다.
2.Singe Page Application (SPA란)
SPA는 Single Page Application의 약자로, 최초 한 번만 전체 페이지를 로딩하고, 이후에는 필요한 데이터만 서버와 주고받아 페이지의 특정 부분만 동적으로 업데이트하는 웹 애플리케이션을 의미합니다
웹 개발 방식은 크게 MPA(Multi-Page Application)과 SPA(Single-Page Application) 두가지로 나뉩니다.
SPA 는 초기 로딩 후에는 페이지 이동시 전체를 다시 로딩하는 대신, 변경이 필요한 부분만 업데이트 하여 사용자에게
더욱 빠르고 부드러운 경험을 제공할 수 있습니다.
반면 전통적인 방식 MPA 웹방식에서는 사용자가 새로운 페이지를 요청할 때마다 HTML, CSS,JavaScript 파일을 모두 다시 받아와서 화면전체를 새로 그리는 방식입니다.. 페이지에서 필요없는 부분을 포함하여 전체적으로 갱신되기 때문에 비효율적입니다..
초기 웹개발공부를 했을때는 대부분 MPA 방식으로 웹페이지를 제작했었습니다.
하지만 MPA방식이 단점만 존재하는것은 아닙니다. 가장 큰 장점은 SPA와 달리 SEO에 친화적이고 최초로딩이 짧은 편.
결론적으로 SPA는 빠른 속도와 부드러운 사용자경험, 그리고 풍부한 상호작용이 중요한 웹사이트에 적합하고
MPA는 SEO가 중요하고 웹사이트 규모가 비교적 작으며 정보제공 위주의 웹사이트에 적합합니다.
요즘에는 사용자경험을 매우 중요하게 생각함으로 SPA방식이 많이 활용되고있습니다.
SPA의 단점으로 꼽히는 초기 로딩속도와 SEO 문제를 해결하기 위해 SSR(Server-Side Rendering) 프리렌더링등의 기술도 있습니다.
| 특징 | MPA (Multi-Page Application) | SPA (Single Page Application) |
| 페이지 수 | 여러 개의 HTML 페이지 | 단일 HTML 페이지 |
| 페이지 로딩 | 페이지 이동 시마다 전체 페이지 새로고침 | 최초 로딩 후 필요한 부분만 동적 업데이트 |
| 속도 | 초기 로딩 빠를 수 있으나, 페이지 전환 느림 | 초기 로딩 느릴 수 있으나, 페이지 전환 빠름 및 부드러움 |
| 사용자 경험 | 페이지 이동 시 끊김 발생 가능성 | 끊김 없는 자연스러운 사용자 경험 제공 |
| 서버 vs 클라이언트 | 서버 중심 | 클라이언트 중심 |
| SEO | 유리 | 불리할 수 있음 (SSR, 프리렌더링으로 해결 가능) |
| 상호작용성 | 제한적 | 풍부하고 동적인 상호작용 가능 |
| 개발 복잡성 | 웹사이트 규모에 따라 단순하거나 복잡해질 수 있음 | 초기 설정 및 상태 관리가 복잡할 수 있음 |
3.React 특징
1) 높은 성능 (Virtual DOM)
React의 가장 큰 장점 중 하나는 Virtual DOM을 사용하여 효율적인 UI 업데이트를 제공한다는 것입니다. 브라우저의 실제 DOM 조작은 비용이 많이 드는 작업인데, React는 Virtual DOM을 통해 실제 DOM 조작 횟수를 최소화하여 웹 애플리케이션의 성능을 크게 향상시킵니다. UI에 변경이 일어나면 Virtual DOM에서 필요한 부분만 비교하고 업데이트하여 빠르고 부드러운 사용자 경험을 제공합니다.
2) 컴포넌트 기반 아키텍쳐
React는 웹 페이지를 컴포넌트라는 작고 독립적인 UI 단위로 구성합니다. 이 컴포넌트들은 독립적으로 동작하며, 필요에 따라 여러 번 재사용할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수를 용이하게 만들어줍니다. 마치 레고 블록처럼 필요한 기능의 컴포넌트를 조립하여 복잡한 UI를 쉽게 구축할 수 있습니다.
3) 크로스 플랫폼 개발 가능성 (React Native)
React의 장점은 웹 개발에만 국한되지 않습니다. React Native라는 프레임워크를 사용하면 JavaScript와 React 문법을 그대로 활용하여 iOS와 Android 모바일 애플리케이션을 개발할 수 있습니다. 이는 웹 개발자와 모바일 앱 개발자 간의 협업을 용이하게 하고, 코드 재사용성을 높여 개발 효율성을 극대화합니다.
4) 단방향 데이터 흐름
React는 단방향 데이터 흐름을 따릅니다. 이는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 전달되는 것을 의미합니다. 이러한 데이터 흐름은 애플리케이션의 상태 변화를 예측 가능하게 만들고, 디버깅을 더욱 용이하게 해줍니다. 데이터의 흐름을 추적하기 쉽기 때문에 애플리케이션의 복잡성이 증가하더라도 안정적인 유지보수가 가능합니다.
5) JSX문법의 편리성
React는 JavaScript 코드 내에서 HTML과 유사한 문법으로 UI를 작성할 수 있는 **JSX (JavaScript XML)**라는 확장된 문법을 사용합니다. JSX는 UI 구조를 시각적으로 쉽게 파악할 수 있도록 도와주며, 개발자가 더욱 직관적으로 UI를 구성할 수 있도록 지원합니다.
'IT & 프로그래밍 > React.js' 카테고리의 다른 글
| [React] CRA 지원중단, Vite로 프로젝트 시작하는 방법 (0) | 2025.05.11 |
|---|