Frontend 프론트엔드

State Lifting페이지네이션의 현재 페이지 상태값을 게시글 목록 등 형제 컴포넌트에서도 사용하기 위해서는 부모 컴포넌트에서 상태값을 관리하는 패턴이 State Lifting 이다.예시코드 부모 컴포넌트 import { useState } from "react";import Child1 from "../../../src/components/units/15-lifting-state-up/Child1";import Child2 from "../../../src/components/units/15-lifting-state-up/Child2";export default function CounterLetDocumentPage() { const [count, setCount] = useState(0); ..

1페이지에서 이전페이지를 누르면 음수 ( - ) 페이지로 이동하지 않도록 설정해주기 const onClickPrevPage = (): void => { if (startPage === 1) return; setStartPage(startPage - 10); refetch({ page: startPage - 10 }); };마지막 페이지 리팩토링1. 총 게시글의 개수를 가져온 뒤 나누기 ( / ) 10 을 해서 마지막 페이지를 구한다.const FETCH_BOARDS_COUNT = gql` query { fetchBoardsCount }`;// data : dataBoardsCount 로 설정해줘 data 이름이 중복되지 않게 한다 const { data: dataBoardsC..

페이지 양 옆에 이전페이지와 다음페이지 추가하기  이전페이지 {new Array(10).fill(1).map((_, index) => { return ( {index + 1} ); })} 다음페이지이전 페이지 구현 함수  const [startPage, setStartPage] = useState(1); const onClickPrevPage = (): void => { setStartPage(startPage - 10); refetch({ page: startPage - 10 }); };다음 페이지 구현 함수  const onClickNextPage = (): void => { ..

graphQL 의 refetch 복습정리 1.  Mutation 이후 refetch 하기 // 쿼리문const FETCH_BOARDS = gql` query { fetchBoards { number writer title contents } }`;const DELETE_BOARD = gql` mutation deleteBoard($number: Int) { deleteBoard(number: $number) { message } }`; const [deleteBoard] = useMutation(DELETE_BOARD); const onClickDelete = async (e) => { const result = await..

컴포넌트에 전달할 props 파일 만들기import { css } from "@emotion/react";export const globalStyles = css` * { margin: 0; box-sizing: border-box; font-size: 15px; }`;emotion css에 글로벌 스타일 적용하기 Global 컴포넌트를 @emotion/react 로 부터 가져온다import { Global } from "@emotion/react";import { globalStyles } from "../src/commons/styles/globalStyles"; Global 컴포넌트를 return값에 넣는다export default function App({ Component, ..

_app.tsx의 세팅 컴포넌트아래의 코드를 확인해보면 ApolloPrivder 설정 컴포넌트로 다른 컴포넌트들을 감싸서 이용하고 있는것이 보인다. 쉬운 예제코드에서는 세팅 컴포넌트들이 많지 않아 문제가 되지 않지만, 세팅해줘야할 컴포넌트들이 많아진다면 _app.tsx 의 코드가 복잡해지고 유지보수가 어렵게 된다.따라서 각각의 세팅 컴포넌트들을 따로 파일에 분리해 작성하고 컴포넌트 합성을 해서 _app.tsx에 적용한다.// import "../styles/globals.css";import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";import type { AppProps } from "next/app";import "a..

_app.tsx 에서 레이아웃 설정하기_app.tsx 안에 있는 컴포넌트를 Layout으로 감싸고, 를 Props.child 로 Layout 컴포넌트에 보낸다. 특정 페이지에서 레이아웃의 일부분을 렌더링 하지 않을 때 router.asPath 로 현재 URL을 가져오고, 상수로 정해놓은 특정 페이지와 일치하면 렌더링 하지 않는다는 조건을 추가한다.// 변하지 않는 상수값은 함수( 컴포넌트 ) 밖에다가 정의한다.const HIDDEN_HEADERS = [ "/section13/13-01-library-icon", "/section13/13-02/library-star",]; const router = useRouter(); const isHiddenHeader = HIDDEN_HEA..

props 상위 컴포넌트에서 하위 컴포넌트에 props로 데이터를 보낼 때 , 데이터의 이름을 직접 ( 수동 ) 설정해준다props.children컴포넌트의 사이에 하위 컴포넌트에 전달할 데이터를 적으면, 자동으로 props.children 안에 담겨서 전송된다. 예시코드부모 컴포넌트 import Example from "../../../src/components/units/14-props-children-example";export default function PropsChildrenPage() : JSX.Element{ return( +++++++++++++ 빨간색 파란색 초록색 ++++++++++++++++ ..