고정 헤더 영역
상세 컨텐츠
본문 제목
91일 - 페이저 - 페이지에 따라 데이터 가지고 오기 (componentDidUpdate, preProps, this.props.location.search, queryString.parse)
본문
728x90
https://reactjs.org/docs/components-and-props.html
- props 개념
- props는 형태에 따라 무궁무진하다.
요지는 property 넘겨받을 수 있고, 넘겨줄 수 있어야
cf) 생활코딩 워딩 "props를 통해 훨씬 더 똑똑한 컴포넌트를 만들 수 있게 됨"
페이저의 페이지를 누를때마다, 데이터 가지고 와줘보자.
1) 이벤트 달아주기
- 사실 필요 없음. 2번째 사진 그림 설명 참고
- 38번째 줄을 보면 Link to로 고쳤기 때문에, '{i+1}을 누르면 여기로 가 - 라는 onClick 의미가 이미 담겨있기에 굳이 또 onClick을 만들어줄 필요 없음
22번째줄
- this뿐만 아니라 "hello"같은 것도 전달 됨
이거 다시 해보기
-> 해보면 알 수 있음.
bind 뒤에 첫 번째 인자는 this로 써주자.
- this를 이벤트 객체로 출력하고 싶다면, e를 인자로 써줄 수 있음 (this는 인자에 써주지 않음)
//
이렇게 하는게 맞을까?
-> no...
페이저는 컨텐츠를 가지고 있지 '않은' 컴포넌트
-> 데이터를 fetch해오고 싶은 욕구는 넣어두기!
- just '데이터 가지고 와~'라고 말해주는 정도로만!
그냥 페이저의 역할은 "화면 바꿔줘"라고 알려주는 역할 정도로만. 우리는 통보하는 방식으로만 구현하자.
우리는 props를 가지고 있잖아~~
"history, location, match 만큼은 암기하세요"
//
history가 중요.
만약 2페이지를 클릭하면 -> 화면 다시 고치라고 알려줘야함.
history가 화면 다시 고치는 능력을 가짐!
오른쪽 15번째줄의 출력 결과는 test, history 임 (history를 넘겨줬으니)
28번째줄의 일반 링크였으면 15번째줄 주석 풀지 말아야.
지금은 Link여서 주석해줘도 render가 나오는 것
*"render"가 호출되는 이유
- List.js 안에 Pager.js가 있잖아.
39번째줄 보면 주소가 상대경로로 되어있지? List.js주소 뒤에 붙는다는거임 (안에서 이루어지고 있어서)
-> 그럼 저 주소로 가면 어떻게 되겠어.
List.js 화면이 처음 들어가졌을 때 이미 생성자는 호출 됬겠고 / render가 나오는 것 (왠지 저 아래 순서랑 같아보이네)
//
데이터 새롭게 가지고 오는 위치는 어디냐하면~!
생성자 - render - mount - render // 그 다음부터 update - render - update...
51. 우선 하드코딩 해줌
//
실행해보면
계속 렌더링됨
이게 당연함
update 되니까 또 fetch 되고 > render 호출 되고 > update 되고... 반복
사진
생성자 -> render -> mount 까지는 일어나는거 알지.
근데 setState (render값에 변화가 있으면) -> render가 다시 호출됨. -> 그리고 update
- 근데 update에 fetch 복붙해줘서 setState가 또 있어 -> render가 다시 호출됨. -> 그리고 update ... 반복
// 무한루프 깨는 방법
주석 읽기!
prevProps는 이름 우리가 명명해줄 수 있는 것.
대신 props 성질 가진다는 것 + 여기서는 이전 업데이트 상태 전달된다는 것~!
//
p=2로 하드코딩 줬는데, 고쳐보자
// 페이지 클릭할 때마다 이제 내용 달라짐 ~!
지금은 1,2,3,4,5만 나오는데 6,7,8,9,10... 이렇게 다 나오도록 하자~!
라이브러리 추가
컨트롤 c 해서 나간 다음,
npm i query-string
그리고 임포트
3번째줄 앞에 'queryString'은 안써도 되나 편하게 아래서 쓰기 위해서 (아마 이름으로 사용) 적어준거
728x90
반응형
