React 학습 시작하기 - Day 1

카테고리

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

서브카테고리

웹 개발

대상자

웹 개발 초보자(React 기초 개념 이해 및 환경 설정 방법 필요)

난이도: 초급(기초 개념과 설치 절차 설명)

핵심 요약

• React는 JavaScript 라이브러리로, Virtual DOM을 사용해 UI를 효율적으로 렌더링
• JSX 언어를 사용해 HTML 유사한 코드 작성 가능
• NPM/NPX를 통해 라이브러리 설치 및 프로젝트 생성

섹션별 세부 요약

1. What is React?

• React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리
• JSX(JavaScript XML)를 사용해 HTML 유사한 코드 작성
• 예시: const element =

  Hello, React!

  ;

2. History of React

• Jordan Walke가 2011년 Facebook에서 개발
• 2013년 오픈소스화
• Facebook, Instagram, Netflix, WhatsApp 등 주요 기업 사용

3. Why Use React?

• Component-Based 설계로 재사용 가능한 컴포넌트 구축
• Virtual DOM을 통해 빠른 렌더링 및 SEO 최적화
• 대규모 커뮤니티와 산업 내 높은 수요

4. Library vs Framework

• React = Library (개발자가 앱 구조 결정)
• Framework (예: Angular)는 전체 구조 제공

5. NPM (Node Package Manager)

• 라이브러리 설치 도구
• 예시: npm install react

6. NPM 설치 절차

• Node.js 설치 (NPM 자동 포함)
• 설치 확인 명령어:
• node -v
• npm -v

7. NPX 사용법

• NPX는 설치 없이 패키지 실행 가능
• 예시: npx create-react-app myApp (React 앱 빠른 생성)

8. JS DOM vs React DOM

• JS DOM: 실제 DOM 조작, 대규모 변경 시 느림
• React DOM: Virtual DOM 사용, 필요한 부분만 업데이트 (빠르고 효율적)
• 예시: ReactDOM.render(

  Hi

  , document.getElementById("root"));

결론

• React는 Virtual DOM 기반의 Component-Based 라이브러리로, NPM/NPX를 통해 설치 및 프로젝트 생성 가능
• Node.js 설치 후 NPX 명령어로 빠르게 React 앱 환경 구성 가능
• JSX와 Virtual DOM을 활용해 빠른 렌더링 및 SEO 최적화 가능