bkdragon's log

이벤트 위임은 자식 요소가 여러 개 일 때 부모 요소에만 이벤트를 적용하면 버블링에 의해 이벤트가 실행되는 것을 이용하는 기법이다. 핸들러를 여러개 사용하지 않아도 되어 메모리를 절약하거나 요소가 추가되거나 제거되었을 때 별로도 이벤트를 추가하거나 제거해야하는 필요성이 없는 장점을 지닌다. 근데 React에서는 이벤트를 빌드 단계에서 Root Element로 위임시킨다고 한다. 즉 개발자가 이벤트 위임 패턴을 사용해서 코드를 작성해도 성능적인 이점을 가져갈 수 없는 것이다. Root Element로 모든 이벤트가 위임된다는 것은 React에서는 이벤트 발생 단계 중 캡쳐링 단계가 없다는 것이다. 버블링은 어떨까? alert('footer')} style={{ width: '100%', border: '1..

클로저의 의미 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다. 이 말을 이해하려면 실행 컨텍스트에 대해 알아야 한다. 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아둔 객체로 선언된 변수와 함수 this 등의 정보가 담겨있다. 렉시컬 환경은 함수 내의 변수 상태를 관리하는 역할을 한다. 렉시컬 환경은 두부분으로 나뉘여 있는데 로컬 변수를 저장하는 부분과 외부 렉시컬 환경에 대한 참조 부분이다. 우리가 함수 내부에서 전역 변수를 사용할 수 있었던 것도 그 함수의 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문에 변수 정보를 알고 있어서 그런 것이였다. 다시 클로저의 개념으로 돌아가면 함수가 선언됐을 때의 렉시컬 환경, 즉 함수 내부의 지역 변수를 활용한 개념이라고 생각할 ..

우선 React 성능 최적화를 하는 방법을 알기 전에 라이프 사이클과 리렌더링이 발생하는 타이밍에 대해 먼저 알아보자. 컴포넌트의 라이프 사이클 컴포넌트 라이프 사이클은 크게 3가지 단계로 구분할 수 있다. Mountion(생성) , Updating(업데이트), UmMounting(제거) 위의 이미지는 클래스형 컴포넌트에서 라이프 사이클 메서드들이 나와있는데 함수형 컴포넌트에선 훅이 그 역할을 대체한다. 분류 클래스형 컴포넌트 함수형 컴포넌트 Mounting constructor() 함수형 컴포넌트 내부 Mounting render() return() Mounting ComponenDidMount() useEffect() Updating componentDidUpdate() useEffect() UnMo..

DOM은 웹 페이지나 웹 앱에 있는 HTML 요소들을 트리구조로 표현한 객체 모델이다. 브라우저는 DOM 을 이용해 화면에 요소들을 렌더링하는데 DOM이 가진 문제점이 몇가지 있다. 노드수가 많아질 수록 속도가 느려지고, DOM 업데이트가 잦으면 오류를 발생시킬 수 있다. React를 활용하여 만든 웹은 SPA를 사용한다. 모든 리소스가 들어가있는 하나의 HTML 문서를 지속적으로 재렌더링 해줘야하는 문제점도 생긴다. JavaScript에서 getElementById(), getElementByClass(), querySelector() 등으로 돔에 접근하는데 이때 아래와 같은 과정이 일어난다. 브라우저가 HTML을 분석하여 원하는 노드를 찾는다. 찾은 요소의 자식 요소를 제거한다. 요소를 업데이트한다...

일반적으로 Mutation 사용 이후 데이터가 변화했을 가능성이 높아서 데이터를 refetch 했었다. 당연하게도 이는 요청이 계속 발생하는 것임으로 성능에 좋지 않다. 직접 캐시된 데이터를 수정하는 방법을 알아냈다. 공식문서의 내용을 해석해보았다.(=> 이후가 나의 해석이다.) 서버에서 객체를 업데이트하는 변형을 처리할 때, 일반적으로 변형의 응답으로 새 객체가 자동으로 반환되는 것이 일반적입니다. ⇒ 데이터를 추가하는 mutation을 발생시키면 일반적으로 성공 응답으로 추가된 데이터 객체가 반환된다. 해당 항목에 대한 쿼리를 다시 가져오고 이미 가지고 있는 데이터에 대한 네트워크 호출을 낭비하는대신, ⇒ mutation 이후 refetch를 통해 불필요한 통신을 발생 시키는 대신 쿼리 클라이언트의 ..

React-hook-form은 form을 통해 제출할 내용의 유효성 검사 과정을 간편하게 해주고 불필요한 렌더링도 줄여주는 라이브러리이다. 사용 예시를 살펴보고 주요 역할을 하는 register와 handleSubmit에 대해 살펴보려고 한다. React-hook-form 기본 사용법 예시 import React from 'react'; import { useForm } from "react-hook-form"; interface FormData { writer : string; title : string; contents : string; } const ReactHookFromPage = () => { const { register, handleSubmit, watch, formState: { erro..

HOC를 이해함에 있어 커링을 이해하면 더 쉽게 이해가 되는 것 같아서 내용을 적어보려고 한다. 커링이란? 커링은 함수 내부에서 함수를 리턴하는 것을 말한다. 일반적으로 함수는 다음과 같다. function add (num1 : number , num2 : number) { return num1 + num2 } 커링을 활용하면 다음과 같은 변경이 가능하다. function addPlus(num1) { return function addPlus2(num2) { return num1 + num2 } } addPlus는 함수를 리턴한다. 즉, const 이름은상관없어요 = addPlus(1) // => 이것의 리턴 값이 함수인 것이다. 이름은상관없어요(2) // => 이것의 리턴값이 처음에 받은 1과 두번째로..

React-Query는 캐싱을 지원한다. 특정 query key를 가진 인스턴스가 마운트 되었을 때, 호출된 적이 없었다면 데이터를 캐싱해두고 다음 요청에 캐싱된 데이터를 제공한다. 패치된 후 데이터의 라이프 사이클을 이해하면 더 좋은 활용이 가능할 것 같아서 글로 정리해보려 한다. 아래 이미지는 개인 프로젝트 React-Query로 캐싱된 데이터를 캡쳐한 이미지다. 위를 보면 fresh, fetching, stale, inactive 가 있는데 데이터의 상태이자 이것들로 라이프 사이클을 설명할 수 있다. 각 상태에 대해 설명남기면, Fetching : 초기 상태이며 백엔드와 같은 외부 소스로부터 데이터를 가져오기 위한 동작. Fresh : Fetchung 이후에 server-side와 client-si..

‘컴포넌트 분리하기’ 참으로 어려운 문제이다. 구글에 검색을 하면 다른 내용의 다양한 글이 나오는데 이는 아직까진 왕도가 없다는 뜻일 것이다. 그래서 나도 우선 나의 전략을 짜기로 했다. 후에 현업에 가서 새로운 인사이트를 얻고 다양한 코드를 보고 지속적으로 발전시킬 계획이다. 본격적인 글을 작성하기에 앞서 내용이 주관적일 수 있고 언제든 변경될 수 있음을 알린다. 1. 관심사의 분리 비슷한 관심사를 가지는 코드들끼리 모아두는 것이다. 이것은 model과 view의 분리로 생각할 수도 있다. 예를 들어 게시판 상세 페이지를 만드는 상황이다. 게시판 상세 페이지에는 다양한 데이터가 필요할 것이다. (글의 제목, 작성자, 생성한 날짜, 댓글, 이미지 등등) 이런 데이터를 모아두는 컴포넌트와 데이터를 단순히 ..

웹 페이지를 만들다보니 똑같은 데이터를 여러곳에서 패칭해야하는 경우 생겼다. 그래서 useQuery를 이용한 데이터 패칭을 훅으로 만들어서 사용하려고 한다. React-Query는 캐싱을 지원하기 때문에 중복해서 요청해도 캐싱되어 있는지를 먼저 확인함으로 필요없는 요청이 늘어나는 걱정은 하지 않아도 된다. userId와 accessToken을 이용한 유저 데이터 상세 데이터를 패칭하는 훅을 만들것이다. 이름은 useUser라고 하겠다. import { useQuery } from "react-query"; import { SERVER_URL } from "@/util/constant"; import * as Apis from "picktogram-server-apis/api/functional"; imp..