페이징 이전 , 다음 버튼

• page-item, page-link, disabled, active
• page-item 에 active, disabled 작성해야 함

  나는 페이지 숫자 배열에 추가할줄 알았는데 그냥 버튼 활성화 로직만 신경쓰면 될 듯 하오.

리액트의 {}

• React 에서 {} 은 자바스크립트의 공간
• backtic 은 자바스크립트 내에서 데이터를 가지고 올 수 있다.
  

라이브러리

• 지금까지 설치한 라이브러리 리마인드
  
• 기본 폼을 자동으로 완성해준다.
  

React Router

router의 역할?

React 내에서 spring 에 요청을 하지않고 그저 자바스크립트로 페이지 이동을 시키거나 페이지 이동없이 화면을 변경해준다.

• 새로운 페이지 이동없이 작업을 수행 = SPA 방식
• React router 라이브러리 필요
• 여기서의 경로는 가짜 경로 즉 서버의 controller 등이 존재하지 않음
• 주소창을 제어해서 이동한다.

클라이언트 사이드 렌더링 (CSR)

• 주소창에 변화가 있지만 페이지 이동이 없다.
• 최소한의 html 요소를 보여주고 리액트에서 spring 으로 데이터를 받아와서 그걸 리액트의 자바스크립트로 보여주는 과정

글 목록

글 목록 불러오기

• 페이지 번호 2를 클릭한다면?
  move() 실행으로 navigate로 URL의 param(=pageNum) 이 2로 변경 ->
  useEffect()로 refreh(2) 실행되서 페이지 렌더링 됨 -> refreh(2)로 pageNum=2 에 해당하는 row, 페이징 정보를 가지고 옴 -> UI update

• param 상태로 관련 정보 DB에서 가지고 오기

move 는 파람 변경 , refresh 는 페이지 정보 가져오기

navigate?

• 자바스크립트로 페이지를 변경할 때 사용함
  

useEffect() ?

• 어떤 값이 변경될 때 마다 실행
  

새글 작성

• navigate 로 js 으로 이동함
  

수정하기(링크 직관적)

• 링크를 직관적을 만듬
• router 의 index.jsx 에서 경로를 ":" 을 사용하기
  
  
• 결과물
  

삭제(삭제된 배열 덮어쓰기)

• pageInfo 에서 삭제된 배열로 list:[] 정보만 변경하기
  

해쉬

총정리

깜빡임 없이 페이지의 부분을 변경한다.

• React는 홈 페이지의 작은 부품(상태)를 변경하는 느낌

보완

• App.jsx에 boot 추가하면 모두 사용 가능

<연습 노트 끄적임>