🐰 TIL 0127

[Pagination]

<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.

---

[state, setState lifting]

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.

---

[Pagination Practice for Freeboard ]

⬇️ 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>
    )
}

[Algorithms - new Set()]

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 보다 빠름