<span onClick={onClickPage} id="1"> 1 </span>
<span onClick={onClickPage} id="2"> 2 </span>
<span onClick={onClickPage} id="3"> 3 </span>
โฌ๏ธ Originally, we can make like this separately, but the code below is much more simple. โฌ๏ธ
{new Array(10).fill(1).map((_, index) => (
<span key={index + startPage} onClick={onClickPage} id={String(index + startPage)}>
{` ${index + startPage} `}
</span>
))}
โก๏ธ Here, the developer is using new Array() to make a new array that will be put into the page. Also, using state and setState, the user can go back and forth of pagination.
const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10)
Also to delete the paginations that don't contain any data should be deleted; so there we used Math.ceil() to round up the number of data and get the needed number of pagination.
What if one wants to show child component 1 's state in child component 2?
--> Since they aren't in a relationship of parent and child, the state must be spread through parent component by lifting state up. Then, it can be used by using props in child components.
โฌ๏ธ Parent Copmonent
import Child1 from "../../src/components/units/14-lifting-state-up/Child1"
import Child2 from "../../src/components/units/14-lifting-state-up/Child2"
import { useState } from "react"
export default function LiftingStateUpPage(){
const [count, setCount] = useState(0)
return(
<div>
<Child1 count={count} setCount={setCount}/>
<div>================================</div>
<Child2 count={count}/>
</div>
)
}
โฌ๏ธ Child Component 1
export default function Child1(props){
const onClickCountUp = () => {
props.setCount((prev) => prev+1)
}
return(
<div>
<div>์์1 ์นด์ดํธ: {props.count}</div>
<button onClick={onClickCountUp}>์นด์ดํธ ์ฌ๋ฆฌ๊ธฐ</button>
</div>
)
}
โฌ๏ธ Child Component. 2
export default function Child2(props){
return(
<div>
<div>์์2 ์นด์ดํธ: {props.count}</div>
<button>์นด์ดํธ ์ฌ๋ฆฌ๊ธฐ</button>
</div>
)
}
--> Then it is now possible to take state changes in both child components.
โฌ๏ธ Parent Copmonent
import Boards from "../../src/components/units/14-05-boards-pagenation/Board";
import Pagination from "../../src/components/units/14-05-boards-pagenation/Pagination";
import { gql, useQuery } from "@apollo/client";
const FETCH_BOARDS = gql`
query fetchBoards($page: Int){
fetchBoards (page: $page){
_id
writer
title
}
}
`
const FETCH_BOARDS_COUNT = gql`
query fetchBoardsCount {
fetchBoardsCount
}
`
export default function PageNationLastPage(){
const {data, refetch} = useQuery(FETCH_BOARDS,{
variables: {page : 1}
})
const { data: dataBoardsCount } = useQuery(FETCH_BOARDS_COUNT)
const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10)
return(
<div>
<h1>ํ์ด์ง๋ค์ด์
์ฐ์ต</h1>
<Boards data={data}/>
<Pagination refetch={refetch} lastPage={lastPage}/>
</div>
)
}
โฌ๏ธ Child Copmonent 1 - Board
export default function Boards(props){
return (
<div>
{props.data?.fetchBoards?.map((el) =>(
<div key={el._id}>{el.title} {el.writer}</div>
))}
</div>
)
}
โฌ๏ธ Child Copmonent 2 - Pagination
import { useState} from "react"
export default function Pagination(props){
const [startPage, setStartPage] = useState(1)
const onClickPage = (event) => {
props.refetch({ page: Number(event.target.id) });
}
const onClickPrevPage = () => {
if (startPage === 1){
return }
setStartPage(prev => prev - 10)
props.refetch({page : startPage -10})
}
const onClickNextPage = () => {
if (startPage + 10> props.lastPage){
return }
setStartPage(Prev => Prev +10)
props.refetch({page : startPage + 10})
}
return (
<div>
<span onClick={onClickPrevPage}>์ด์ </span>
{new Array(10).fill(1).map(
(_, index) =>
startPage + index <= props.lastPage &&(
<span
key={index + startPage}
onClick={onClickPage}
id={String(index + startPage)}
>
{` ${index + startPage} `}
</span>
)
)}
<span onClick={onClickNextPage}>๋ค์</span>
</div>
)
}
b=[1,2,3]
Array.isArray (b)
//๋ฐฐ์ด์ด ๋ง๋ ์๋๋๋ฅผ ๋ฐ์ง๋๊ฒ
a = new Set([1,2,3,2])
typeof a
//๋ฐฐ์ด ํํ๋ฅผ ๊ฐ์ง๋ ๊ฐ์ฒด ๋ฐ์ดํฐ
//๊ณ ์ ํ ๊ฐ๋ง ์ ์ฅ (์ค๋ณต๋ฐ์ดํฐ๊ฐ ๋ค์ด์ค์ง ์์)
a.add(4)
a.delete(2)
//data๊ฐ ์กด์ฌํ๋๊น ์ญ์ ๊ฐ ์๋ฃ๋๋ค๊ณ ํด์ true๊ฐ ๋จ๋๊ฑฐ์ (boolean)
//data ์กฐํ (boolean)
a.has(4)
//4๊ฐ ์๋ ์๋ ํด์ true๋ฅผ ๋ฆฌํดํจ
//๊ธธ์ด ์กฐํ (3)
//a.legnth ๋ก ํ๋ฉด ๊ธธ์ด ์กฐํ ์๋จ
a.size
b= Array.from(a)
b
//[1,3,4]
//data reset
a.clear()
a
//new set ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ข ๋ ํธํ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅํจ
//ํจ์จ์ฑ๊ณผ ์๊ฐ์ ์ธ ์์ good
//๋ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ฆํ ๋ new set์ฌ์ฉํด์ includes ๋ณด๋ค ๋น ๋ฆ