react 개념

리액트 개념

데이터 변경을 감지하여 UI를 자동으로 변경해주는 엔진

• daemon
  • 데이터 변경 감지를 위한 프로세스
  • 항상 돌아가야 한다. → 서버가 필요(node.js)
• npm
  • 라이브러리 설치 및 빌드 도구
  • 자바로 치면 maven
  • npmjs.com -라이브러리 모음
• node.js
  • 리액트를 실행하기위한 서버
• npx
  • 라이브러리 설치 및 빌드 도구
  • npx는 글로벌 라이브러리를 재사용한다.npm은 프로젝트와 글로벌로 나누어 관리한다.
  • 라이브러리의 새 버전을 설치할 때 구 버전을 삭제해 주어야 한다.
  • 또한 라이브러리 실행 후 삭제도 자동으로 지원한다.

 

실행과정

• package.json
  • react-scripts start → index.js를 실행시킨다.
• index.js
  • render 함수
    • <App/> index.js의 App함수의 반환값을 가져온다(JSX 문법)
    • index.html의 #root에 삽입한다.
• SPA
  • 싱글 페이지 어플리케이션
  • a태그 요청 못함
• react
  • 데이터 변경을 감지해서 UI를 그려주는 엔진

 

JSX 문법

• 자바스크립트 파일에 html문법이 들어간다.

 

바벨

• 자바스크립트 es6코드를 es5로 변환해주는 컴파일러