92일 - 페이저 - 5페이지 이상 구현, '다음', '이전' 구현, 강조 색깔 다르게 하기, 검색 구현 / 조건에 따른 로그인 Layout 이동

// 복습

 

Pager란 컨트롤러가 될 수 없음 

- 데이터 보여주게 하고... 그런 제어자 역할을 할 수 없다는 것

-> 제어자는 List 컴포넌트가 되어야 함. 

    이 안에 속한(!) 컴포넌트는 main 역할을 하면 안 됨

이 가지고 있는 녀석을 

- startPage는 Pager가 구현하도록 해주자. (여기서는 삭제)

Pager가 사용하도록 하는 것

Q. lastPage는 이미 List.js에서 구해줬는데 Pager.js한테 따로 구현하라고 해야할까? 

-> Pager 컴포넌트를 독립시켜준거니까 넘겨주자! (의존하게 하면 안되도록~)

 

1) count 넘겨 받아야

2) startPage 구하기 위해 page가 필요함

- 어제 page 구하기 위해 query 사용했었지

 

이렇게 해주는 이유가 es6랑 무슨 관련이지? 

-> json에서 대입하려는 변수명과 json의 key값이 같으면 변수명만 적어줘도 된다는 ~~ 

 

59번째줄도 바꿔주기

-> 이러면 12페이지 쿼리로 주면 11,12,13,14,15.. 이렇게 나옴

---

'다음' 페이지 누르면 나오게 해주자 

-> <span> -> <Link>로 바꾸기

 

 

지금 뭐가 문제인가

 

// 

오른쪽에서 저 부분을 render로

 

부모 상태 값이 바뀔 때마다 바뀌는건, 자식이 render()에 넣어야

- 값이 달라지니까 render에 넣어야

오른쪽에서 44~47번째 부분은 삭제. 

 

위에 남겨둔 부분

 

 

지금 고민은 "굳이 state를 써야하는가"

---

* 정리 * 

setState는 언제 일어나냐 하면 

-> fetch, onClick 등의 이벤트 발생 시 state에 변화가 일어나지.

setState 호출할 일이 있을 때! state를 쓰는 것

 

vs 

 

페이저는 얘기가 다름 

- 페이저 '내에서' 갱신할게 없음. 

List render 될 때 -> Pager render도 종속되서 저절로 바뀌는 것

-> 그래서 Pager에 자체적으로 state를 마련할 필요가 없다. 

 

부모의 상태값 바뀌는 걸 이용해서, view를 만들면 됨

 

다 state 지워주기

//

 

나 다음 페이지 21페이지로 나오는거 해결

-> url에 답이 있었음. '다음'을 누르면 바로 21페이지가 나오는 이유는 url을 잘못 써줬구나~ 하고 힌트를 알 수 있는 것

    내가 startPage +5가 아니라, lastPage + 5로 넣어줬기 때문~ 이거 고쳤더니 나옴

 

cf) 함수형으로도 가능하지

- state 안 쓰니까

---

'이전 페이지' 만들어보자

---

 

16페이지가 마지막인데, 페이지들 계~~속 나오는거 없애주기

 

뭐가 잘못된거지? 데이터를 왜 바꿔야? 

- 이거 해결해보자! 

- db와 지금 우리 데이터에서 부르는 수가 달랐음 ~ 

---

강조 색깔을 바꿔보자

---

검색을 구현해보자

코드가 너무 길어서 아래다가 함수를 만들어준 ~ 

이렇게 넣어주고

그런데 화면이 새로고침해서 안되서, 169번째줄 넣어줌

 

---

1-1. 직접 DOM 개게 얻어서 그 속성 값을 이용하는 방법

1-2. 리액트 방식으로 refs를 이용해 객체를 얻어서.... ""

2. state를 이용해 state의 값을 변경하는 코드를 직접 작성하여 2way 바인딩을 사용

 

1-2 방식.

리액트 방식으로 refs를 이용해 객체를 얻어서 그 속성 값을 이용하는 방법

 

2 방식. 

 

// 

 

어떤 방식을 사용할까. 

각각 장단점이 有

여기 value 값 지워줘야 함

- 리액트에서는 빈문자열 허용 x 

 

state 쓰면 value = {this.state.query} onClick={} ... 

- 이렇게 해서 얻을 수 있는 이점은, 값 가져올 때 state 변수 쓸 수 있다는 것. onClick 안에서 thsis.state.query 이렇게

 

// 

 

굳이 state 쓸 필요 x 

- 막 데이터들이 갱신되고 이러면 state 필요 

- 그런데 그냥 '검색' 같은 경우는 ~ 굳이. 

-> 2 방식으로 하자 (front-end에서는 DOM하는걸 최소화하는게 아무래도 좋아서)

 

셋팅해주기 ~ 

112번째줄에 onInput으로 바꿔야 함

검색어 입력해주도록 셋팅 ~ 

 

// 

 

field도 셋팅 ~ 

92. render()에 확인차 출력. 

- 제목하면 -> title 나오고, 

- 작성자하면 -> writerId 나옴

 

테스트차 

 

// 

 

cf) 

list.js의 update의 fetch는 

- 페이저 버튼 누를 때 실행되는거

 

여기서도 searchButtonClick 누르면 

-> update에서 fetch 되도록 하자! 

 

171번째줄에 =이 앞으로 와야겠지

 

//

 

나 검색되도록 해야함

- map undefiend 오류

 

항상 라이프 사이클을 알기 위해 console에 찍어보기! 

 

// 

 

프론트엔드는 페이지 로딩 없음 + (특정 구역) 페이지 유지 가능

ex) 싸이월드에서 홈 -> 프로필 눌렀더니 배경 음악이 끊긴다? 그러면 안 됨

- 싸이월드는 겉의 프레임을 바뀌지 않도록 하고, 안에만 바뀌게 한 것

---

전역 변수 활용해서 인증과 권한을 해보자.

 

구글에 'react authentication authorization' 키워드로 구글링해보면 각자가 각각의 방식으로 하는 중...임을 알 수 있음.

-> 요지는 인증과 권한은 리액트에서 공인된게 없다~ 

 

https://jasonwatmore.com/post/2019/02/01/react-role-based-authorization-tutorial-with-example

- 선생님 추천 (괜찮게 정리되어있다고) 

 

라이브러리를 안 써서 인증과 권한을 해보자~ 

 

//

 

1. 전역 변수 개념 이용

2. id, pwd 입력 받은거 가지고 사용자에게 인증했냐고 물어볼 수 있어야

 

// 

 

로그인 페이지 먼저 ㅋㅋㅋ 만들어보자.

 

login.html (html(1) 파일에서 다운 받은거) 에서 main 부분 넣기 

- 그리고 class -> className 등 살피고

 

여기도 필요한 부분 넣어주기

 

//

 

 

 

-> 이러면 header에 있는 '로그인' 누르면 화면 바뀜

 

// 가운데 부분 나오게 해보자

 

로그인 버튼이 없어서 급하게 css 만들어줌 (지금 css 연결 안해준 상태라)

//