[React] SpringBoot + React 데이터 불러오는 방법

---

리액트는 로직 구조를 이해 하는게

 

중요하기 때문에, 

 

절대적으로 블로그에 포스트를 해야됨을 느낀다...

 

아 그리고,,, 내가하는건는 좀 일방적으로 구글이나 유튜브에서 가르쳐주시는 분들이랑은

 

좀 많이 다른 내용이니까.... 양해 바란다...

 

Now Let's do it blogging !

 

---

리액트 파일구조

 

 

 

 

이렇게 해서 총

 

ListContent,

 

ListFilter,

 

Index,

 

List,

 

Product

 

5개의 jsx. 파일을 이용하고있는데,

 

굳이? 이걸 이렇게까지 나눌 필요는 없다.

 

그냥 팀회의때 파일구조를 이런식으로 잡자는 이야기가 나왔고,

 

리액트의 재사용성을 최대화하기 위해서 만든 구조니까

 

굳이 이런 구조를 똑같이 잡을 필요는 없다.

 

 

데이터를 뽑아오는 순서

 

index.jsx

 

index.jsx 에서 Route를 통해서 원하는 링크로 페이지를 넘길 수 있게 만든다.

 

element={<요소/>}

 

를 통해서 

 

List면 리스트 , insert면 데이터 삽입시키느 페이지를 불러오는것이다.

 

List.jsx

 

 

List.jsx 페이지에 할당되어있는 요소들이

 

ListFilter.jsx,  ListContent.jsx 인데

 

이 두개의 jsx파일을 불러온다. 왜냐하면 

 

<ListFilter /> 이런식으로 사용하고 있고

 

import 하여서 해당된 파일을 불러오도록 할 수 있다.

 

 

 

그리하여 이 두개의 파일안에 있는 내용들을 읽어 오게된다.

 

본인의 입맛에 따라서 List 요소를 한 파일로 모두 작성해도 상관없다.. 

 

그건 본인 마음이다.

 

ListContent.jsx

 

사실상 가장 중요한 요소이지 않을까 싶다.

 

데이터를 불러오는 명령이 이 과정에서 들어간다.

 

변수 response를 선언하고 await 비동기로 HttpRequest 크롬에 데이터를 던진다

 

url은 다음과 같이 본인이 설정해주는것이고 만약 일치한다면 거기에있는 데이터를 수신 할 수있다.

 

 

 

store/repository

 

 

다음과 같이 mobx를 사용해서 데이터 저장소를 이용한다.

 

mobx도 결국에는 상속같은 느낌으로 사용한다.

 

결국여기에 데이터가 담겨야 데이터를 삽입하고 가져올 수 있는것이다.

 

 

Controller.java

 

 

ApiResponse는 따로 데이터를 체계적으로 관리하기위한 파일이다.

 

여기서 볼것은 다음과 같다.

 

download/product/

 

아까 ListConetnt 에서 httpRequest 에 적어준 url이

 

일치해야지 데이터 교환이 가능하다..

 

이 글에서 가장 중요한건 그것이다.  

 

---

 

 

To be continue..