🗓 진행일: 2022.04.15~16 새벽
체력 딸려서 오래 못 하는 중... 이따 저녁에 또 공부해야지

5-1. Why React.js

1. 리액트는 컴포넌트 기반의 UI 라이브러리이기 때문에
   1. 중복 코드를 수정해야 할 때 중복된 코드가 많다면 수정해야 할 게 많아짐
   2. ‘컴포넌트화' 방식을 사용해서 수정 시 공수를 줄일 수 있음
2. 리액트는 선언형 프로그래밍이기 때문에
   1. jQuery: 명령형 프로그래밍 (절차를 하나하나 다 나열해야 함)
   2. 선언형 프로그래밍: 목적을 바로 얘기함
3. virtual DOM (Document Object Model)
   1. document가 계속 업데이트 된다면, 브라우저는 계속해서 많은 작업을 실행해야 함
   2. 발생되는 변화를 가상의 DOM에 미리 업데이트를 시킨 다음에..? (렌더링 안 함) 한꺼번에 업데이트를 함

5-2. Create React App

React.js 외에 Webpack(다수의 자바스크립트 파일을 하나로 합쳐줌), Babel(jsx와 html을 혼용하는 문법 중 자바스크립트 코드를 작성할 수 있게 도와줌) 패키지를 다운 받음

→ 근데 다 설치하기엔 너무.. 할 게 많음

→ Boiler Plate (미리 필요한 패키지 다 묶어놓은 거)

1. 폴더 만들기 (reactexam1)
2. VScode로 해당 폴더 열기
3. 패널, 터미널 열기 (Command + J)
4. create 진행

   1. npx: npm은 아니고, 한 번만 사용하고 말 것이라면 npx를 사용

      npx -v 

   2. npx -v: 버전 확인

   3. 생성

      npx create-react-app reactexam1

5. reactexam1 폴더 내에 생성되었기 때문에, 안에 있는 내용 잘라내서 바깥으로 꺼내주고 내부에 있는 reactexam1 폴더는 삭제해주기

node.js 기반이기 때문에, node_modules, package.json 등 비슷한 구석이 많음
package.json 보면 scripts 내에 단축으로 등록해둔 것이 있음

• 실행하기

npm start

localhost:3000으로 리액트가 열린다

• 끝내기: control + c

• 실행 순서

  • index.js에서 App.js를 import 했음
  • index.html에 있는 root라는 id의 div를 index.js에서 읽어서,
    render를 해주는데 그 내용이 App.js에서 리턴해주는 값

• javascript + html = 자바스크립트 표현식, extension = jsx

  • 자바스크립트의 변수나 함수를 html 코드에서 쉽게 사용할 수 있음

• export default ??

  • 어떤 js에서 export default로 내보낸 컴포넌트는,
  • 다른 파일에서 import 이름 from ‘파일의 경로'로 사용할 수 있다 (이름 바꿔도 됨)