React

부모 자식 간의 관계

<상속유형>
1. 부모 ---> 자식
2. 부모 <--- 자식
3. 부모 <---> 자식 (공유, setState)
4. 자식 <---> 자식

• 자식 요소에서 자신만의 데이터와 동작을 가질 수 있음
• 부모 요소는 자식요소로 object 타입에 담아서 데이터를 전달할 수 있다.
• 부모에서 상태값을 업데이트 하면 자식 요소에서도 업데이트 된다.
• 서로 상태와 데이터를 상호적으로 보낼 수 있다.

상태값 변화 = 새로운 값으로 덮어쓰기

배열 요소 제거

• 배열의 인덱스와 삭제를 원하는 요소의 인덱스 비교하기
• filter 로 원하는 요소만을 뽑아서 새로운 배열 뽑기
  

Restful API

Restful API 의 요청

• 앱에서도 밑의 방식처럼 요청을 보내서 데이터를 받아온다.
• json 응답을 받아서 앱 UI에 출력
• GET 방식에는 파람 쿼리를 타고 갈 수도 있음

GET /posts (?pageNum=)

• post 추가
  POST /posts

• 1번 post
  GET /posts/1

------밑의 방식 javascript 로 페이지 요청을 할 때 사용 가능-------------------

• 1번 delete
  DELETE /posts/1

• 1번 post 전체필드 수정
  PUT /posts/1

• 1번 post 일부 수정
  PATCH /posts/1

Service 추가된 Restful API

예외 처리

• Optional 의 orElseThrow() 로 예외를 발생하고 관린할 수 있음.
• 존재하지 않는 id 입력 시 예외를 발생시킴
  

단일 메서드

• @Transactional 를 붙이고 entity 를 find 한 이후 setter 메소드로 수정한다면...
  자동으로 DB에 수정 반영된다.

• 즉 repos.save 작성하지 않아도 됨.
  

  @Transactional 붙이고 find 하고 set 하면 repo.save 작성 안해도 된다.

• null 이 아닐 때만 수정하는 기능을 한줄로...
  

페이징 처리

• test 데이터 만들기
  
• findPage 메소드는 1 페이지에 해당하는 row 를 얻어오고 하단 페이지 번호 처리를 위한 데이터를 담았다.
  
  

클라이언트 사이더렌러딩 : React 에서 만들어줌
서버 사이더렌더링 : thymeleaf

React 에서 페이징에 해당 데이터 뽑기

const pageInfo = {
    list: [
        { id: 1, title: "첫 번째 게시글", content: "이것은 첫 번째 게시글입니다.", author: "사용자1" },
        { id: 2, title: "두 번째 게시글", content: "이것은 두 번째 게시글입니다.", author: "사용자2" },
        { id: 3, title: "세 번째 게시글", content: "이것은 세 번째 게시글입니다.", author: "사용자3" }
    ],
    startPageNum: 1,
    endPageNum: 5,
    totalPageNum: 10
};

React 에서 페이지 nav bar

• Spring 에서 뽑은 StartPageNum 과 endPageNum 을 이용해서 새로운 배열을 만들고
  상태값 관리를 해주면 된다.

• 페이지 로딩 시 실행되는 함수인 refresh 에서 페이징 숫자 생성 range 함수로 시작번호, 끝번호 전달하고 range 함수에서 나온 [시작번호 ~ 끝번호] 배열을 result 결과에 담고 그 배열로 상태값을 업데이트

• 밑에 번호 UI 새로운 배열로 만들기
  

• 선택한 페이지 선택 bar 만 active 활성화

과제
다음 이전 만들기
disabled
component

보완

1. asnyc await
2. map 에 담는 것....?
3. 자바스크립트의 backtic

• backtic 의 javascript 에 데이터 받은 데이터를 받기위해서 작성함