[React] 리액트가 필요한 이유 / Creat React App

🔮 리액트 존재 이유

• 산탄총 수술(중복이 많아서 유지보수가 어려운 상황) -> sol.컴포넌트화 방식(사용자 정의 태그를 만들 수 O)
• 명령형 프로그래밍(절차를 하나하나 나열, jQuery) -> sol. 선언형 프로그래밍(그냥 목적을 바로 말함, React)
• Virtual DOM
  • DOM : Document Object Model
  • 가상돔에 업데이트를 시켜서 한번에 리얼돔에 업데이트.

🔮 Creat React App

• Webpack
• Babel
  

-> 모든 패키지들을 설정하고 이해하기는 힘듬 -> 패키지를 감싼 패키지인 Boiler Plate를 사용.

📍 React 사용법

• 다운

  1. 폴더 생성
  2. 터미널 열기 -> 해당 경로로 이동
  3. npx create-react-app 프로젝트 이름 입력(프로젝트 이름은 폴더 이름과 달라도 됨), npx 사용한 이유는 한번만 사용하고 안할 것이기 때문.

• 사용

  1. 터미널에 npm start
  2. ctrl + c

📍 React 파일들 살펴보기

• public > index.html

  • src > App.js
  • src > index.js
  • public > index.html
    
  • 여기에 있는 root아이디 아래에 index.js가 들어가는데(ReactDOM.redner), App 이라는 태그는 App.js 파일이다.
• public > favicon.ico : 상단 탭에 나와있는 아이콘
• public > logo192, logo512, manifest.json : 당장 필요없음

• public > robots.txt : 구글에서 정보를 수집할 때 정보의 공유 범위지정을 할 수 있다.

• src 폴더에 필요없는 파일들 지우기 && 최종 남아있는 파일
  • App.css
  • App.js
  • index.css
  • index.js

📍 jsx

html + js같은 느낌. jsx문법은 js의 변수, 함수를 값을 쉽게 포함해서 사용할 수 있다. App이라는 함수를 만들고 그 안에 html 문법을 리턴시킨다. 이를 다른 파일에서도 사용하기 위해서는 export default App; 를 사용하고 사용할 파일에서 import App from "./App"; 를 통해서 불러온다.