✏️ 이벤트 버블링 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다. 이러한 경우, event.target.id 가 아닌 event.currentTarget.id를 사용하여 실제 이벤트 함수가 실행되는 태그의 id를 가져올 수 있다. 또한 event.stopPropagation()을 사용하여 전파를 중단할 수 있다. ✏️ 이벤트 캡처링 이벤트 캡처링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계이다.
✏️ 정의 기존에 받아왔던 데이터가 변경되었을 경우, 최신 데이터로 다시 fetch 해주기위해서 사용된다. Apollo에서 제공하는 기본 기능이다. useMutation 함수 안에 refetchQueries라는 키가 있다. 모든 Mutation 이후에 refetchQuries를 사용하는 것은 아니다. Mutation 이후에 변경된 데이터를 받아올 수 없을 경우에 사용한다. 🔎 사용법 refetchQuries는 배열로 시작한다. 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해준다. 그러면 Mutation이 성공적으로 끝났을 경우, refetchQueries를 실행시켜준다. // 삭제 mutation -> refetchQueries를 이용해 최신 데이터 받아오기 c..
router.query는 라우터가 연결된 모든 컴포넌트에서 사용이 가능하다. 라우터가 있는 컴포넌트를 재사용할 때는 다이나믹 라우팅 폴더[ ]가 있는지 잘 확인하고 재사용해야 한다. ∴ router.query를 사용할 때는 콘솔에 router.query를 찍어보고, 안에 뭐가 있는지 확인한 후에 필요한 걸 꺼내서 사용하는 것이 좋다.
리액트의 데이터 흐름은 단방향이다. 부모에서 자식으로만 전달이 가능하다. props는 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 또는 함수이다. props drilling props가 자식에게 넘겨주는 단계가 두단계 이상이 될 경우를 props drilling이 일어났다고 한다. 과도하게 이루어지면 해당 props가 어디서 내려지고 있는지 찾는 것이 난해해진다. props drilling을 방지하기 위해서 global state를 이용하는 것이 좋다. emotion에 props 던지기 emotion으로 만들어진 태그에도 props를 전달할 수 있다. 즉, props를 활용하여 CSS를 변경할 수 있다. export const Test = styled.div` color: ${(props) => (p..
✍️ 정의 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하고, 이 방법들을 패턴이라고 부른다. React에서 사용하는 유명한 패턴으로 container/presentational 패턴과 atomic 패턴이 있다. container/presentational 패턴 소스코드를 Javascript(기능)부분과 JSX(UI) 부분으로 나누는 방법을 의미한다. container: Javascript(기능) presentational: JSX(UI) 자식 컴포넌트인 presenter를 부모 컴포넌트인 container에 불러와 하나로 합쳐서 실행한다. 두 파일은 나뉘어져 있지만, 실행시에는 pages에서 하나로 합쳐져서 실행된다. 왜냐하면, 우리가 브라우저에서 볼 수 있는 컴포넌트는 pages에 있는 inde..
Component가 어디로 import되어서 사용되는지 유의해서 사용해야 한다. 주소창에 입력해서 실행했을 때, 전체 컴포넌트가 합쳐져서 실행된다고 이해해야 한다. boards/[boardId] router.query.boardId 단방향 흐름 고려
📋 게시판 등록페이지: /boards/new 상세페이지: /boards/1 다이나믹 라우팅 /boards/:id -> :으로 표기 /boards/{id} -> { }으로 표기 목록페이지: /boards 수정페이지: /boards/3/edit 다이나믹 라우팅 /boards/:id/edit /boards/{id}/edit 🏪 쇼핑몰 상품 등록페이지: /products 상품 상세페이지: /products/상품ID 상품 목록페이지: /products 상품 수정페이지: /products/상품ID/edit
✏️ Router 객체 Router 객체란 페이지 이동과 관련된 기능을 가지고있는 객체이다. 자주 사용하는 Router 객체 기능 공식 문서: https://nextjs.org/docs/pages/api-reference/functions/use-router Functions: useRouter | Next.js Using Pages Router Features available in /pages nextjs.org import Router from 'next/router' 현재 위치 주소: Router.pathname 현재 위치 주소: Router.asPath 뒤로가기 버튼: Router.back() 현재 페이지에서 다른 페이지로 이동: Router.push('/') 새로고침: Router.reload..
✏️ apollo-client 셋팅하기 apollo-client를 설치한 후, 사용하기 위해서 setting이 필요하다. 설치한 도구들을 setting하는 위치는 일반적으로 _app.js 이다. index.js(페이지들)이 app.js로 합쳐져서 app.js가 실행되는 것이다. Component 자리에 index.js가 들어오게 되고, index.js가 합쳐진 app.js가 실행된다. ApolloClient : graphql 세팅, API가 있는 위치를 모든 페이지에 알려주기 위해 세팅한다. InMemoryCache : 나중에 꺼내서 쓰기위해 컴퓨터의 메모리에 백엔드에서 받아온 데이터를 임시로 저장한다. ApolloProvider : 컴포넌트에서 client graphql 세팅을 사용할 수 있게 전달해준..
✍️ 정의 React의 인기 CSS 방식이다. CSS를 자바스크립트 파일에 넣어놓고 쓴다는 의미이다. ⚒️ 2가지 도구 styled-components yarn add styled-components npm install styled-components emotion 🆚 기존 CSS 방식 vs CSS-IN-JS 방식 기존 CSS 방식 .title { width: 996px; height: 52px; } Hello World CSS-IN-JS 방식 import styled from '@emotion/styled' const Title = styled.div ` width: 996px; height: 52px; ` import {Title} from '../../styles/emotion' Hello Wor..
