๐Ÿฐ TIL 0127

j00b33ยท2022๋…„ 1์›” 27์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
13/33

[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 ๋ณด๋‹ค ๋น ๋ฆ„

profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€