리액트 이해하기

• 리액트는 자바스크립트 라이브러리 로 사용자 인터페이스(UI)를 만드는 데 사용한다.
• 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고, 해당 컴포넌트 내에서 컴포넌트의 생김새와 작동 방식을 정의한다.
  • 재사용성이 높음
  • 개발 기간 단축, 유지보수 용이

DOM Document Object Model

• HTML, XML 문서의 구조와 내용을 객체 지향으로 표현한 모델
• 코드 내 원하는 위치에 접근하기 위한 하나의 방식으로 요소를 객체로 표현하고 조작할 수 있게 한다.
  • 객체 표현 : <div> 태그는 DivElement로 표현
  • 트리 구조 표현 : document.body.h1
• 데이터가 변경되면 전체 DOM을 수정하여 성능이 저하된다.

Virtual DOM

• 가상의 DOM으로 DOM의 복사본이다.
• 데이터가 변경되면 VDOM을 수정하고 DOM과 비교하여 최소한의 변경만 실제 DOM에 적용한다.

구조

• 오직 뷰만 담당하는 라이브러리
• 라우팅, Ajax, 상태관리는 다른 라이브러리로 처리

React 시작하기

• VSCode 실행

• node.js 설치

• 리액트 프로젝트 생성
  - `npx creat-react-app //현재 디렉토리에 리액트 앱 만들기

  • 리액트 실행
    npm start
  • 실행 종료
    ctrl + c

• eslint, prettier 설치 및 실행

• Src > index.js
  - 입구 역할 : 필요한 모듈, SVG파일, CSS파일 등을 불러온다.
  - App.js 파일을 렌더링하여 화면에 표시한다.

• Src > App.js
  - 리액트 컴포넌트를 정의한다.

• Public
  - 브라우저에서 직접 접근 가능한 정적 파일들이 저장된다.