Frontend 프론트엔드

버튼 클릭시 특정 요소임을 알려주는 방법e.target.id 로 특정 게시글을  전달한다. const onClickDelete = (e) => { deleteBoard({ variables: { number: Number(e.target.id), refetchQueries: [{ query: FETCH_BOARDS }], }, }); }; 삭제 React의 key 속성 리액트의 ' key ' 속성은 리스트( 자바스크립트의 배열 ) 를 렌더링할 때 각 리스트 아이템에 고유한 식별자를 부여하기 위해 사용된다.  리스트 렌더링..

map 함수 사용시 주의할 점 배열의 각 요소가 객체일때 , 한줄이라 중괄호 {} 를 생략하면 객체가 함수의 중괄호로 인식 될 수 있으니 조심해야 한다.  JSX 요소가 배열에 담겨 있다면, React는 자동으로 순서대로 렌더링을 한다  백엔드에서 받은 데이터를 실무에서 렌더링 하는 방법 1번의 방법은 map 함수의 결과 배열을 변수에 담아서 이 변수를 presenter에서 사용하는 방법이고, 2번의 방법은 JSX 안에 map 함수를 넣어서 렌더링 하는 방법이다. presenter의 JSX 을 확인했을때 bbb같은 변수를 확인해보기 위해서는 다시 container로 이동해야하는 번거로움이 있으므로 , container로부터 backend의 데이터를 건네받아 presenter 컴포넌트 자체에서 map 함수..

React 의 상태 업데이트는 즉시 되지 않는다 React의 상태 업데이트는 비동기적이고 일괄적으로 처리되기 때문에, 상태 변경 요청이 발생한 즉시 상태가 변경되지 않는다. 대신 , React 는 이벤트 핸들러 또는 그 함수의 실행이 완료될 때까지 상태 변경 요청을 모아서 일괄 처리한다.이 기능을 통해서 불필요한 리렌더링을 방지하고 성능을 최적화 할 수 있게 된다. 예시 아래의 코드를 보면 버튼 클릭 이벤트 발생 시 count를 2번 올리게 되어 있지만, 두번째 setCount 실행시 아직 이전 setCount 의 +1 이 반영이 안되어 있기 때문에  결과는 1이 된다.import { useState} from 'react'export default function Test(){ const [count..

Container - Presenter 패턴컴포넌트에서 JS 부분과 JSX 부분을 각각의 파일로 나눠서 관리한다.  주의사항 이렇게 JS 와 JSX를 각각의 파일로 분리하고 import 해서 사용하게 되면 JS에서 정의한 변수나 함수를 JSX 안에서는 사용할 수 없게 된다. 각각의 파일( 컴포넌트 ) 는 독립적인 실행 컨텍스트를 가지므로, 한쪽에서 변수와 함수를 정의해도 다른쪽에서는 사용할 수 없다. 해결방법 Container 컴포넌트에서 props 로 데이터를 Presneter 컴포넌트에 전달해주면 된다.  리액트는 단방향의 데이터 흐름을 갖고 있다. 따라서 반대로 Presenter 컴포넌트에서 Container 컴포넌트로 props를 전달해 주는것은 불가능하다. emotion Css의 적용방법 유닛 ..

정적 라우팅의 한계 static 라우팅을 사용하면 매번 새로운 페이지로 이동할 때 마다 폴더를 생성해 주어야 한다. 게시판에 수천, 수만개의 게시글이 있다고 한다면, 이렇게 폴더를 만들어 운영하기는 불가능 할것이다. Next 의 동적 라우팅동적으로 받을 주소를 [] 안에 담으면 된다. 아래의 예시는 qqq라는 변수에 동적 라우팅의 정보를 담는다. router 변수를 만들어 주고 router.query 로 정적 주소의 값을 받아온다const router = useRouter();console.log(router.query.qqq); 전체 예시코드import { useQuery, gql } from "@apollo/client";import { useRouter } from "next/router";cons..

useRouterrouter.push() 를 활용해 페이지를 이동한다.import { useRouter } from "next/router";export default function StaticRoutingPage() { const router = useRouter(); const onClickMove = () => { router.push("/section05/05-01-static-routing-moved"); }; return ( 페이지 이동하기 );} 게시판 목록 ,  상세조회 느낌 구현해보기import { useRouter } from "next/router";export default function StaticRoutingPage() { const r..

변수를 graphql 에 전달하는 방법mutation을 작성할 때 변수에 $ 를 넣고, 타입을 지정해주어야 한다.함수를 호출할 때 variable 속성을 넣어주어야 한다.import { useMutation, gql } from "@apollo/client";const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } }`;export default function GraphqlMutationPa..

graphql 실습 코드 gql`` 로 요청할 데이터를 담아서 useMutation 의 매개변수로 넣는다.import { useMutation, gql } from "@apollo/client";const 나의그래프큐엘세팅 = gql` mutation { createBoard(writer: 123, title: "안녕하세요", contents: "반갑습니다") { _id number message } }`;export default function GraphqlMutationPage() { const [나의함수] = useMutation(나의그래프큐엘세팅); const onClickSubmit = async () => { const result = awa..