코드 리팩토링 방법
- early-exit
- toggle
- 비슷한 기능 묶기
포트폴리오 리뷰
Pagination
Pagination은 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법이다.
게시판 형태의 페이지에서 일반적으로 많이 사용된다.
예시) 게시글 목록 페이지네이션
fetchBoardsCount로 게시판 글의 갯수를 가져온다.
-
페이지네이션의 페이지 숫자를 클릭할 때마다 목록에 뿌려진 데이터가 해당 페이지에 해당하는 데이터로 변경되도록 한다.
-> graphQL의 useQuery에서 제공하는refetch 함수를 사용해서 페이지 클릭 시 해당 페이지에 해당하는 데이터를 다시 불러올 수 있다.
refetch를 사용하기 위해서는 useQuery에서 data와 함께 refetch 함수를 불러와야 한다.
필요한 부분에 불러온 refetch 함수를 넣어주고, refetch의 인자에 변경될 variables를 입력해준다. -
startPage와 lastPage를 설정해준다.
startPage : 시작페이지. 1로 설정
lastPage : 게시글이 존재하는 마지막 페이지.Math.ceil(게시글의 갯수 / 10)
- 이전 페이지, 다음 페이지를 클릭했을 때 실행되는 함수에 조건을 설정해서 1 페이지 미만 / lastPage가 화면에 출력된 이후로는 이전 페이지, 다음 페이지 버튼이 동작하지 않도록 설정해준다.
fetchBoards의 게시글들을 map함수로 뿌려준다.
map에 조건부 렌더링을 걸어서 lastPage보다 큰 숫자는 출력 되지 않도록 해준다.
Lifting-State-Up
Lifiting-State-Up은 자식 컴포넌트의 state와 setState를 부모 컴포넌트로 끌어올려 선언해주는 방법이다.
이렇게 하면 props로 자식 컴포넌트1, 2에서 모두 state를 사용할 수 있다.
(자식안에 사용한 state를 부모에 작성하고, 형제 컴포넌트에 전달하여 같이 사용할 수 있다.)
자식이 부모의 state를 바꾸려면 부모에 setState 사용하고 props로 자식에 넘겨준다.
예시)
부모 컴포넌트에 count state를 작성하고, Child1과 Child2에 props로 넘겨준다.
Child1의 카운트 올리기 버튼을 클릭하면, Child2로 보낸 count라는 state도 함께 증가하게 된다.
