[React] React 입문기 : 왜 React를 써야 할까?
웹개발을 하면서 프론트엔드 개발의 트렌드에 쫓아가야 할 필요를 점점 더 느낀다.
금융권에도 React가 많이 사용됨에 따라 React 스킬도 함양할 필요를 더욱이 느낀다 ..!!
React도 마스터해보자!!!! +_+
기존 JavaScript로는 왜 불편할까?
기존의 JavaScript만으로도 HTML을 조작하고 인터랙티브한 웹페이지를 만들 수 있습니다.
하지만 아래와 같은 상황에서 점점 한계를 느끼게 됩니다.
▶ DOM 조작이 복잡하다.
직접 document.querySelector, appendChild 등을 써서 DOM을 조작해야 하니 코드가 길어지고, 상태가 바뀔 때마다 어떤 부분을 업데이트할지 신경 써야 합니다.
▶ 상태 관리가 어렵다.
UI와 데이터 상태(State)가 분리되어 있어서, 여러 상태가 얽힐수록 코드는 지저분해지고 버그가 많아집니다.
▶ 재사용성이 떨어진다.
같은 버튼이나 카드 UI를 반복해서 쓰려면, 복사해서 수정하거나 별도 함수로 만들어야 하는데 구조화가 어렵습니다.
React는 왜 등장했을까?
React는 Facebook(현 Meta)이 개발한 컴포넌트 기반 라이브러리입니다.
등장 이유는 명확합니다 :
▶ UI를 구성 요소 단위로 나누고 재사용할 수 있도록
▶ 데이터 변화에 따라 UI를 자동으로 갱신해 주도록
✅ 컴포넌트 기반
버튼, 카드, 리스트 같은 UI 요소를 하나의 컴포넌트로 만들고 재사용할 수 있습니다.
// jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
✅ 선언형 UI
"어떻게" 보여줄지를 직접 DOM 조작하지 않고, "무엇을" 보여줄지를 선언적으로 작성합니다.
//jsx
return <button onClick={handleClick}>클릭</button>;
✅ 가상 DOM(Virtual DOM)
React는 실제 DOM 대신 가상의 DOM을 사용해서 변경사항만 효율적으로 렌더링 합니다. 그래서 빠릅니다.
React를 쓰기 위해 Node.js가 필요한 이유
React를 개발하려면 개발 도구가 필요합니다. 바로 여기가 Node.js가 필요한 이유입니다.
· React는 브라우저에서 바로 실행되는 코드가 아니라, 빌드 도구가 필요한 코드입니다.
(JSX, 모듈 시스템 등).
· 이런 개발 환경을 위해 Node.js와 npm이 필요합니다.
☞ Node.js는 무엇인가요?
Node.js는 브라우저가 아닌 환경에서 JavaScript를 실행할 수 있도록 해주는 런타임입니다.
React 자체가 Node로 실행되는 것은 아니지만, npm(패키지 관리자)와 빌드 도구들(Vite, Webpack 등)을 설치/실행하려면 Node.js가 필요합니다.
Vite로 React 프로젝트 시작하기
과거에는 Webpack이 주류였지만, 요즘은 Vite가 더 빠르고 편리해서 인기를 끌고 있습니다.
Vite란 ?
→ 차세대 프론트엔드 빌드 도구
→ 빠른 개발 서버 : 필요한 모듈만 즉시 로딩
→ 최소 설정 : 복잡한 설정 없이 바로 시작
→ HMR(Hot Module Replacement) : 코드 수정 시 자동 반영
Vite로 프로젝트 만드는 법
cd 프로젝트명
npm install
npm run dev
브라우저에서 http://localhost:5173으로 접속하면 React 앱이 실행됩니다.
✅ 정리
DOM 조작 방식 | 수동 (직접 접근) | 선언형 (Virtual DOM) |
구조화 | 비구조적, 전역 변수 사용 | 컴포넌트 기반, 재사용 가능 |
상태 관리 | 복잡하고 버그 유발 | useState, useEffect 등 내장 |
확장성 | 낮음 | 높음 |
그리고 React를 시작하기 위해 Node.js와 같은 환경 설정이 필수이며,
그중에서도 Vite는 가장 빠르고 쉬운 스타터 도구입니다.