리액트(React)란

1. 리액트란?

• 자바스크립트 라이브러리 중 하나
• 사용자의 인터페이스를 만들기 위해 사용

 

 

- 리액트가 나온 이유는?

자바스크립트만으로는 부족하기 때문에!

ex) 자전거(자바스크립트)로 장거리 여행이 가능하지만, 힘들다. 그러나 자동차(리액트)의 경우 쉽게 장거리 여행이 가능하다.

 

 

- 자바스크립트가 가지고 있는 단점

• HTML과 JS가 가진 분리감
• 직관적이지만 너무 긴 자바스크립트 문법
• 새로운 페이지를 들어갈 때 마다 새로고침
  • 피로도를 느끼는 사용자

 

 

- 리액트로 해결되는 자비스크립트의 단점

• 관련 있는 HTML 과 JS 문서를 JSX로 합쳐준다.
• SPA(Single Page Applocation) 새로운 페이지나 메뉴를 들어갈 때,
  새로고침이 되지 않아 사용자의 피로도를 줄여준다.

 

 

 

2. 라이브러리 vs 프레임워크

• 라이브러리
  • 기능만 가져다 사용하는 것
  • 버전이 업데이트 되더라도 이전 버전과 호환이 잘 됨
  • ex) 리액트, 제이쿼리, 넘파이 등등
    
    
• 프레임 워크
  • 제공된 틀 안으로 들어가 주어진 규칙을 지켜가며 사용하는 것
  • ex) 앵글러, 스프링, 장고 등등

 

3. 리액트의 역사 및 확장

• 페이스북의 엔지니어인 Jordan Walke가 개발
• React Native로 모바일 어플리케이션까지 제작 가능
  • 간단한 서비스 정도 가능하다.

 

- JSX

• Javascript에 XML을 추가한 확장문법
• 하나의 파일에 자바스크립트와 HTML를 동시에 작성
  • 자바스크립트와 HTML 파일에 분리감이 없기 때문에 가독성이 높고 작성이 쉽다.

 

 

4. 리액트 명령문(터미널)

• ls란 list 안에 있는 폴더, 파일 탐색
• cd란  change directory 경로 이동

 

- 리액트 프로젝트 생성하기

• npx create-react-app 프로젝트이름

- 리액트 프로젝트 실행하기

• cd 실행할 프로젝트이름
• npm start

 

- 혹시 새로 리액트 / 노드 환경을 만들려면?

• Node 설치
• 프로젝트 접근해서 실행
• 만약 안되면
  • case A) npm upinstall -g crete-rect-app
  • npm install -g create-react-app