React_개념_Day_07

 

ㅡㅡㅡ

요약

 

api에서 서버통신을 합니다.

Component와 page와 연동합니다.

핵심입니다.

 

ㅡㅡㅡ

 

1.

2.

3.

4.

 

5.

6.

7.

8.

 

ㅡㅡㅡ

구조

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src- api - todoApi.js(서버에서 통신)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src- components - common- PageComponent.js

src- components - common- ResultModal.js

 

src- components - menus - BasicMenu.js 

 

src- components - todo - AddComponent.js 

src- components - todo - ListComponent.js 

src- components - todo - ModifyComponent.js 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - hooks - useCustomMove.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - layouts -BasicLayout.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - pages - todo - AddPage.js

src - pages - todo - IndexPage.js

src - pages - todo - ListPage.js

src - pages - todo - ModifyPage.js

src - pages - todo - ReadComponent.js

src - pages - todo - ReadPage.js

 

src - pages - aboutPage.js

src - pages - MainPage.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - router - root.js

src - router - todoRouter.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

★오늘주로 사용한 것들

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src- api - todoApi.js(서버에서 통신)★5

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src- components - common- PageComponent.js★4

src- components - common- ResultModal.js

 

src- components - menus - BasicMenu.js 

 

src- components - todo - AddComponent.js ★8

src- components - todo - ListComponent.js  ★2

src- components - todo - ModifyComponent.js ★9

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - hooks - useCustomMove.js★6

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - layouts -BasicLayout.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - pages - todo - AddPage.js★7

src - pages - todo - IndexPage.js

src - pages - todo - ListPage.js ★3

src - pages - todo - ModifyPage.js ★10

src - pages - todo - ReadComponent.js ★1

src - pages - todo - ReadPage.js

 

src - pages - aboutPage.js

src - pages - MainPage.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

src - router - root.js

src - router - todoRouter.js

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

●1

 

useCustomMove : 

useState : 초기값을 넣어놧음 (initState)

 

#

 

useEffect : [page,size배열입니다.] 이것이 변화되면 getList를 실행시켜라는 것입니ㅏㄷ.

#

getlist : async 비동기 처리합니다.

그응답데이터가 여기서 셋팅됩니다.

#

유즈이펙트를 안쓰면 재랜더링이 되기때문에, 유즈이펙트를 사용해줍니다.

페이지 사이즈의 변화가있다면, useEffect

listconponent

todoAPi

#

listComponent.js

 

useCustomMove.js

#

 

put방식

delete - 삭제

목록 - POST방식

 

지금까지 리스트만 추가해서 문제가 없습니다.

추가/삭제는 서버쪽을 불러야합니다. 추가할떄, 포스트방식으로 번호를 넘겨주는 것 방식

딜리트도 역시 불러주셔야합니다. put은 put으로 된것 불러줘야합니다.

레지스터들어가서 처리… PUTMapping 

#백에서 TodoController

 

 

딜리트

 

#프론트에서,(todoApi)

 

#기존방식(PRG방식)

 

#리액트방식 - 데이터뿌려주고, 넘겨주고, 서버로부터 받아서, 화면에서 받습니다.

현재 보여지는 화면에서 서버로호출하고, 그결과를 화면에서 보이게 만들었습니다.

 

#

 

components(실제일처리) -todo : 처리

hook : 한번에 불러서처리

pages(화면출력) -todo - addPage : 에드시켜서 

●2

 

todo - AddComponent.js

 

#

 

#

3

 

훅에 저장

 

.을 써서 체인방식을 사용 }).catch

문제가생기면 콘솔에다가 원인을 찍어주세요

 

then(try) 

catch(catch)

#화면에 띄어지는 모델

 

#수정

#서버연결 시켜주는 것(ajax아닌 axois로 처리했습니다.)