React

node.js 설치 npm 툴 이용 가능 create-react-app 라이브러리 이용 가능VScode 설치 코드짤 폴더 생성 - git/ React class터미널 열고 프로젝트명 입력: success 확인npx create-react-app blogact-app

JSX 문법

변경함수를 써야한다let 글제목, 글제목변경 = useState('맛집 추천!', '신발 추천!', '옷 추천!'); 글제목변경 ();state 원본은 건들지 않고 deep copy해서 수정사항 변경한다var newArray = ...글제목;newArray0 = '맛있

npm install react-router-dom

ES6의 Promise 기반 APIHTTP 응답 상태코드: ok -> response 객체로 반환JSON 객체가 아니므로 response.json() 을 호출하여 데이터를 추출기본 브라우저 API로 라이브러리 설치 불필요Promise 기반 APIHTTP 응답 상태 코드

useParams() : URL 매개 변수를 추출하는 React Router 훅

인자로 콜백함수를 받는다렌더링 될때 마다 실행화면에 첫 렌더링 될때 실행화면에 첫 렌더링 될때 실행value 값이 바뀔때 실행

useEffect, useState는 함수 형태로 제공: 이 함수들은 모듈에서 export된 값( named export )이기 때문에, import 시에 {} 안에 담아서 불러와야 한다: <-> React (default export)로 내보낸 값은 {} 없이

테이블 행을 누르면 해당 글 상세보기로 이동이 되는 구조글 상세보기 시 페이징처리된 페이지 번호를 알수 없음 \-> 테이블 행 클릭 시 상세보기로 이동(navigate) + 페이지 번호(state) 넘김이전 버튼 클릭 시 리스트에서 받아온 해당 글이 있던 페이징의 pa

Pagination List controller

이전 페이징 처리는 제한없이 데이터에따라 페이지매김 수가 계속 생김\-> 처음으로 가는 버튼과 마지막으로 가는 버튼이 없어서 추가 수정\-> 5페이지씩 보여지게 수정