- 발전
요청-> view(html)->화면 통째로
view->요청(js)->ajax(부분변경)->응답json->그리기(js)
: 어렵다.
리액트 -> ajax-> 데이터 변경감지->UI자동업데이트
- 변경감지 데몬서버필요 node.js
- npm,npx 의존성 관리도구(maven, gradle같은것)
npm 로컬에 다 다운- 프로젝트마다, 글로벌
npx는 다운받은 걸 재사용 없으면 다운->실행->삭제
- npm start index.js를 실행시킴
document.getElementById('root')로 public의 index.html에 그림
나는 App.js만 신경쓰면됨
index.html>index.js>App.js
- spa 싱글 페이지 어플리케이션
- 불변함수: 깊은 복사 함수
- 리턴될때 다 랜더링됨-> 쪼개- 컴포넌트화
- 부모가 다시그려지면 자식도 다시그려야할지 연산 -깊은복사
# 리액트 부트스트랩
npm install react-bootstrap bootstrap@5.1.3
index.js 에 추가
# flux-redux
요청(촉매제)->디스패처->스토어->view(목적지)
npm install react-redux
npm install redux
https://ko.reactjs.org/docs/create-a-new-react-app.html
https://www.npmjs.com/package/npm
https://www.npmjs.com/package/react-router-dom
https://react-bootstrap.github.io/getting-started/introduction
https://react-redux.js.org/introduction/getting-started
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9