고정 헤더 영역
상세 컨텐츠
본문 제목
87일 - 리액트 lifestyle, fetch API (promise 객체를 이용한 데이터 요청 방식) - componentDidMount, Map 형식
본문
728x90
타임리프, 리액트를 같이 쓸 수는 없음
list.html에서 <html>에 있는 부분 지우기
- layout도 날라갔는데 그건 이후에...
//
onclick -> onClick으로 고치기
onClick 뒤에 함수 만들어주기
데이터를 가지고 와야함
1) 생명주기를 알아야 함
- fetch API 사용하는 위치를 알아야 함. 이걸 알기 위해 React lifestyle을 알아야 함
2) 데이터 요청하는 도구가 달라짐
- xhr은 과거 방식.
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
- fetch API - promise 객체를 사용한 비동기처리
3) CSRF를 이용하는 방법
1) 생명주기
생성자가 제일 먼저 호출
생성자가 호출되는 시점에 render() 안에 부분이 다 메모리에 올라가 있을까?
-> 멤버 변수 초기화 불가능
Q. 화면 초기화는 그럼 어디서?
- 화면 뜨자마자 화면 초기화하고 싶은건 : componentDidMount (3번째로 호출)
저 위에 노란색이 '약속된 함수'
0. mounting : 화면이 뜸
1. constructor : 초기 생성값이 뜸
2. render : 내 눈에 보이는 view(출력물들)로 생각하면 될 듯 (html 긴 거를 다 render 안에 넣어줬잖앙)
3. componentDidMount : fetch('/api/notice/list') 넣어줬잖아.
- 여기에 fetch 넣음으로서 2번 render (껍데기)를 먼저 보이고, 그 다음에 데이터를 넣는게 되는거지. ('화면 뜨자마자 화면 초기화'한다는 워딩이 여기서 나온 것으로 추정)
- 이게 3번째로 load 된다는점!
ComponentDidUpdate : view -> dispatcher -> store 그 다음에 오는 view 라고 생각하면 될 듯 (바뀌는 얘들)
Q. 서버쪽 fetch는 어디에다가 하는게 좋을까?
-> 화면이 갱신되고 난 다음에! 데이터를 가지고 올건지 vs 보여주기 전에 데이터를 가지고 올건지
- 우리는 componentDidMount에 해주기로 했다.
render에다가 하는건 문제가 큼
- 데이터 가지고 오는 과정을 '계속' 하게 됨
//
render - componentDidupdate ... 반복하고 더 이상 update 할 게 없으면 - componentWillUnmount
Q. API 사용법
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
여기다가 두고,
apiController 아래 NoticeController 복붙해와서 알맞게 고쳐주기
★ 29번째줄 RestContoller로 바뀌어야 함.
- 어디 url로 데이터를 리턴하는게 아니라(이건 Controller), 직접 데이터를 리턴하는거니까.
75번째줄 이유는 - 내가 71,72본째줄에 저렇게 넣어줬으니 :)
| api 주소는 이렇게! admin/notice/detail?id=3 이런건 api에서는 틀린 주소. 쿼리를 질의하면 안 됨 Get - /api/notice/3 이런 식으로 가야함 admin/notice/del?id=3 삭제할 때는 이랬었는데 Delete - /api/notice/3 api는 이런식으로 가야함 목록은 /api/notice/list or /api/notices |
apiController에서 설정해준 url을 들어가면 이렇게 우리가 모아준 데이터들이 나오지.
1번일 때는 -> 아래 1번 그림
- response는 promise. / 근데 .text는 text / . json하면 json 객체
2번일 때는 -> 아래 2번 그림
-> object
//
상황
constructor > render > 그리고 mount 할 때 data를 가지고 오는 것
지황님 질문 : 화면 뜬 다음에 데이터를 가지고 오기까지 긴 시간이 걸릴 경우 (데이터량이 많아서)
- 사용자가 오래 기다려야 하지 않나요 - 가 요지 vs 데이터 없는 화면이라도! 보여줘야 하지 않나
//
text-> json으로 바꾸면 콘솔창에 Object 나옴
이거 또 나눠보자
- json으로 가지고 온 걸 형식에 따라서 (우리는 list, count가 있었지) json.list[0].title 이렇게 가지고 올 수도 있다는 예시
-> okay 알았따가 나왔었지 ㅎㅎㅎ
목록을 바인딩하는 방법
//
이제 1개 말고 2줄을 가지고 와볼까!
2번째줄까지만 json 복사
{"id":92032943,"title":"okay 알았따","writerId":"newlec","content":"test수수정ㄱㄱㄱㄱㄱㄴㄴㄴ","regDate":"2021-06-09T15:27:43.000+00:00","hit":0,"pub":false,"files":null,"comments":null},{"id":92032942,"title":"hi52","writerId":"newlec","content":"aaa1testtes","regDate":"2021-06-09T11:27:47.000+00:00","hit":0,"pub":false,"files":null,"comments":null}
두 줄 가지고 온 거 list [ ] 안에다가 넣어줌
그리고 <tr> 위에 2줄 저렇게 만들어줘서, return 자리에 아래 데이터 가지고 올 것들을 넣어준다.
이러면 우리가 두 줄 가지고 온게 화면에 보인다.
코드를 살펴보자.
배열의 기능을 이용해서 사용 중이다.
list.map이 뭘까
배열의 항목을 가지고, 새로운 배열을 만들어낼 때 사용
Q. 오른쪽 이 형태는 뭘까?
- 왼쪽 같은 경우에는 json 형태가 7번째줄하고 같아서 (api/notice/list 출력한거 보고 다시 확인. 우리가 이렇게 만들어줬었지) 바로 넣을 수 있었던건데
- 만약 json 형태가 같지 않다면 list에는 뭘 넣고, count에는 뭘 넣겠다고 오른쪽처럼 해줘야 하는 것!
cf) list 이름은 aa로 바꿔도 되는 것. this.state.aa 저 자리에~ this.state.aa : json.*** 을 넣겠다. 이런식인거니까!
우리가 원하는 데이터를 ( ) 넣어주고
그럼 게시판에 이렇게 정상적으로 나온다.
페이저, 체크, 일괄 공개 등을 리액트로 해보자~
그런데... 사실...
리액트는 node.js를 위에서(기반으로) 쓸 수 밖에 없는 프레임워크.
바벨은 import가 안 됨.
바벨 쓰면 모듈화가 안됨
-> 모듈 쓰기 위해 WebPack 사용하는데 이걸 쓸 수가 없음.
WebPack의 실행 환경이 node.js용이기에.
js를 팩으로 묶어주는 WebPack :)
728x90
반응형
