jingyulog

✏️ 이벤트 버블링 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다. 이러한 경우, 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 단방향 흐름 고려