React AWS 클라우드 기반 Devops 개발자 과정 React

React란?

리액트(React)는 자바스크립트 라이브러리로, 사용자가 인터페이스(UI)를 구축하는데 사용된다.

컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI요소를 만들고, 가상 DOM(Virtual DOM)을 활용해 성능을 최적화한 프론트 개발 도구다.

 

리액트를 배워야 하는 이유

 

전 세계 점유율 1위 프론트엔드 라이브러리

2023년 기준 40% 이상의 사람들이 react를 사용하여 프론트엔드를 개발하고 있다.

2위인 Node.Js 또한 React를 사용하기 위한 환경이기 때문에 높다.

 

리액트를 사용하면 다양한 오픈소스 라이브러리와 방대한 자료가 존재해 학습이 용이하고 풀스택 개발이 가능해

Next.js와 같은 프레임워크를 활용하면 서버 사이드 렌더링(SSR)도 지원 가능하다.

 

결론 : Single Page Application(SPA) 방식으로 웹을 만들어주며, 화면을 여러 단위로 쪼개고 재사용하기 때문에 코드 관리가 용이하다.

 

 

리트의 특징 3가지

선언형	컴포넌트 기반	Virtual Dom
필요한 컴포넌트만 렌더링	컴포넌트에서 상태를 관리	실제 DOM과 동일
예측 가능하고 디버깅 용이	재사용해서 생산성 향상	리플로우, 리페인트 최소화

 

비교 항목	리액트(React)	바닐라 자바스크립트(Vanilla JS)
정의	컴포넌트 기반의 UI 라이브러리	기본적인 자바스크립트(JS)
개발 방식	JSX를 사용하여 선언적으로 UI를 작성	HTML, CSS, JS를 직접 조작
DOM 조작	가상 DOM을 활용하여 최적화	실제 DOM을 직접 수정
성능	가상 DOM으로 불필요한 렌더링 최소화	직접 DOM을 조작하면 성능 저하 가능
코드 구조	컴포넌트 기반으로 구조적이고 유지보수 용이	복잡한 프로젝트에서 코드 관리 어려움
재사용성	컴포넌트 재사용 가능	동일한 기능을 여러 번 작성해야 함
데이터 흐름	단방향 데이터 바인딩 (State, Props 사용)	데이터를 관리하는 체계가 없음
학습 곡선	JSX, 상태 관리, 생명주기 학습 필요	자바스크립트만 알면 바로 가능
커뮤니티 및 생태계	넓은 커뮤니티, 다양한 라이브러리 지원	기본적인 웹 개발에 필수
적용 사례	대규모 웹 애플리케이션, SPA	간단한 웹사이트, 정적 페이지

 

Virtual DOM(가상 DOM)

• 실제 DOM의 복사본으로 SPA에서 동적인 변화를 효율적으로 관리하기 위해 사용된다.

• js와 jquert는 직접 DOM에 접근하여 편집하지만 react는 VirtualDOM을 통해 간접적으로 DOM을 편집한다.

(개발자는 상태 관리와 컴포넌트 기반 설계에 집중)

 

 

언제 리액트를 사용할까?

•  대규모 프로젝트, 동적 UI가 많은 웹 애플리케이션

•  여러 페이지에서 컴포넌트를 재사용해야 할 때

•  성능 최적화가 중요한 경우(가상 DOM 활용)

•  유지보수성과 확장성이 필요한 프로젝트

언제 바닐라 JS를 사용할까?

•   간단한 웹사이트, 정적인 페이지

•   리액트와 같은 프레임워크를 사용할 필요가 없는 경우

•   프로젝트 규모가 작고, 빠르게 개발해야 하는 경우