React Js - 리액트 JS 환경 잡기

React - 리액트란?

• 페이스북에서 공개한 자바스크립트 UI 라이브러리.

  컴포넌트 단위의 개발이 가능하다.

  프레임워크가 아닌 라이브러리이기 때문에 다른 환경과 함께 사용이 가능하다.

• 가상 DOM 사용

  DOM(Doucument Object Model)은 정적인 UI이기 때문에 자바스크립트로 동적인 수정을 하면 페이지를 다시 그리는 과정에서 많은 시간이 들어간다. React는 가상 DOM을 사용해 변경된 부분만 처리하므로 빠른 처리가 가능하다.

• 단방향 데이터 흐름 지향.

  리액트는 기본적으로는 부모>자식 으로 단방향 데이터를 지향하지만 redux등 서브파티 라이브러리를 사용하면 유동성있는 데이터 처리가 가능하다.

• JSX 사용 권장

  XML 사용이 가능한 자바스크립트 확장문법. 어플리케이션의 처리 속도가 빠름

리액트 JS 환경

• npm i -g create-react-app 사용하여 설치시 특정 폴더에 react 모듈이 저장되어 사용되기 때문에 최신버전을 사용하기 위해선 update 를 해줘야하는 번거로움이 있다. 이를 해결하기위해 npx 를 사용한다.

• npx 는 최신 리액트 버전을 다운 받아 실행하고 오래된버전은 컴퓨터에서 삭제 하므로 최신 버전을 유지할 수 있다.

 npm i npx -g

 npx create-react-app <폴더명>

• 만약 설치가 안된다면 npm install npm@latest -g npm 최신버전으로 설치

• node도 최신버전 설치

• prop-types 설치

 npm install --save prop-types

• yarn start Starts the development server.

• yarn build Bundles the app into static files for production.

• yarn test Starts the test runner.

• yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!