React DOM

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 웹 개발자 (중급 이상, React 기초 개념 이해 필요)

핵심 요약

• React DOM은 DOM 조작을 위한 핵심 패키지로, ReactDOM.render() 및 ReactDOM.createRoot()와 같은 메서드를 제공
• NPM은 패키지 관리 도구, NPX는 패키지 실행 도구로, 설치 여부와 상관없이 임시로 실행 가능
• SPA는 단일 페이지로 동작하며 빠른 전환을 제공, MPA는 사용자 행동마다 페이지 재로드가 필요
• JSX는 JS의 확장 구문으로, Babel을 통해 JS로 변환되어 React 컴포넌트에 사용

섹션별 세부 요약

1. Library vs Framework

• Library는 개발자가 직접 구조를 설계할 수 있는 도구, Framework는 애플리케이션의 전체 구조를 정의
• React는 Library로, ReactDOM은 React의 핵심 기능을 제공하는 패키지
• Framework는 애플리케이션의 흐름을 제어하지만, Library는 특정 기능을 제공

2. React DOM

• ReactDOM은 웹 브라우저에서 DOM 조작을 위한 핵심 모듈
• 주요 메서드: ReactDOM.render() (Legacy), ReactDOM.createRoot() (React 18 이후)
• ReactDOM을 통해 React 컴포넌트를 DOM에 마운트하고, 상태 변화에 따라 DOM을 업데이트

3. NPM vs NPX

• NPM: npm install 명령어로 패키지 설치, package.json에 의존성 추가
• NPX: npx 명령어로 패키지 실행, 글로벌/로컬 설치 여부와 관계없이 임시로 실행
• NPX는 npx create-react-app과 같은 명령어로 개발 환경 구축 가능

4. SPA vs MPA

• SPA (Single-Page Application):

- 사용자 이동 시 페이지 전체 재로드 없이 DOM만 업데이트

- 예: React, Vue, Angular 기반 앱

• MPA (Multi-Page Application):

- 사용자 요청 시 서버에서 새로운 페이지 전송

- SEO 및 서버 부하 관리가 용이

5. JS vs JSX

• JS는 JavaScript의 일반적인 코드, JSX는 React에서 사용하는 XML-like 구문
• JSX는 Babel을 통해 React.createElement() 호출로 변환
• 예:
  Hello
  → React.createElement('div', null, 'Hello')

결론

• React DOM은 React 애플리케이션의 DOM 조작 기능을 제공하며, SPA 구현에 핵심적인 역할
• NPM과 NPX는 패키지 관리와 실행 도구로, 개발 효율성 향상에 기여
• JSX는 React 개발의 핵심 언어로, Babel과 Webpack을 통해 실제 JS로 변환되어 작동
• SPA/MPA 선택 시, 성능, SEO, 개발 복잡도를 고려해 사용자 경험과 기술적 요구사항을 맞춤 설계해야 함