⭐ React + SpringBoot (3) 썸네일형 리스트형 React와 SpringBoot 연동 시 체크 사항 # React와 SpringBoot 연동 시 체크 사항 정리1. Backend URL 2. DTO 정보 React와 SpringBoot의 흐름, 간단정리 # React와 SpringBoot의 데이터 흐름 정리 React와 SpringBoot의 연결 흐름 정리 [React] : npm start → index.js → app.js → index.html(app.js 파일을 root 영역에 실행) → app.js에 정의된 route에 의해 실행 → Component 실행(Component에는 실제 비지니스 로직이 구현) → service (백엔드 데이터를 받아옴, 연결고리(REST API)) → [SpringBoot] → controller(REST API) → service → repository → END; # React와 SpringBoot의 데이터 흐름 정리 (그림) 기본 흐름 분석 1. React의 특징 - 단방향 데이터 흐름 (one-way data flow) - 데이트 흐름 : 하향식 → 리액트의 큰 특징은 위에서 아래로 내려가는 단방향 데이터 흐름 이다. - props (변하지 않는값 이다.) → 컴포넌트 외부에서 props를 이용해 데이터를 전달 받을 수 있다. 그리고 데이터를 전달해주는 주체가 부모 컴포넌트가 된다. 받는 컴포넌트는 props를 통해 전달 받은 데이터의 출처를 알지 못하고 부모 컴포넌트로부터 받기만 한다. - state (변하는 값 이다.) → 사용자가 요청한 이벤트에 따라 변경이 가능하다. 이것을 상태로써 관리한다. 어떤 사용자가 게시물을 추가 및 삭제 할때 이벤트가 변경 되므로 이는 props가 아닌 state로 두고 관리를 해야한다. - state (.. 이전 1 다음