soso-tip

soso-tip copied to clipboard

react-hook-form 톺아보기

3

react-hook-form의 동작방식은 HTML Element를 내부 `ref`로 관리하는 방식이다. ```tsx // useForm 'register'함수의 마지막 부분 return (ref: (TFieldElement & Ref) | null) => ref && registerFieldRef(ref, refOrRegisterOptions); // input의 ref를 attachEventListeners...

SoYoung210

user snippet 파일 이름을 기준으로 `export default function 파일이름()`까지 생성해줌 ```json { "export default function": { "scope": "javascript,typescript, typescriptreact", "prefix": "edf", "body": [ "export default function $TM_FILENAME_BASE()", ], "description": "export...

SoYoung210

## Desc  [AnimateSharedLayout](https://www.framer.com/api/motion/animate-shared-layout/)을 쓸때 위 처럼 animation이 걸린 컨텐츠의 width가 흔들린다면 `layout="position"`으로 position 변화에만 애니메이션이 적용되도록 하자.

SoYoung210

```diff module.exports = { presets: [ [ 'next/babel', { 'preset-react': { runtime: 'automatic', - importSource: '@emotion/react', }, }, ], ], - plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'], } ``` 두 설정이 있으면 [stitches의...

SoYoung210

postcss 8이 릴리즈되면서 디펜던시가 여기저기 종종..깨짐.. 특히 웹팩4 모드로 돌리면 최신 디펜던시와 거진 호환이 안되는데.. - `@storybook/addon-postcss`로 postcss버전을 패키지 버전으로 써주고 - storybook/scss를 사용해주고 - (if yarn2) 의존성을 좀 명시해주면...

SoYoung210

// 내용 보충 중 6개의 form(Controller + 단순 input)으로 이뤄진 field group을 fieldArray로 다룰 때 다음과 같은 퍼포먼스 저하가 발생했다.  ## Problem `register({ required: isRequired && '에러메세지' })` 코드로...

flex-soyoung

# cache clear안될때 ```tsx import React, { ReactNode } from 'react'; import { SWRConfig } from 'swr'; /** * @description https://github.com/vercel/swr/pull/231#issuecomment-591614747 */ const SWRNoCache = ({ children }: { children:...

SoYoung210

jest에서 esm을 지원하지 않아서 생기는 이슈 (지원 하려고 실험중) test env에서 modules: auto주면 esm으로 변환안되어서 jest실행이 가능하다. ```js module.exports = { plugins: [ ], presets: [ ['@babel/preset-env', { 'modules': false...

SoYoung210

## [wip] isSuccess 궁금한 점: https://react-query.tanstack.com/docs/api 상에 `onSuccess`콜백도 있고, `isSuccess`도있는데 두 값의 차이나 타이밍은? 단순히 DX? [이 부분의 코드](https://github.com/tannerlinsley/react-query/blob/00b9e968a80ca7c51fd50479aee852bb41bf9bc6/src/react/useMutation.ts#L151-L156)를 보니 타이밍상 `onSuccess`콜백이 먼저 불릴것 같다. 이후에 `isSuccess`값이 true가 되지 않을까....

SoYoung210

react transition group with lottie

1

## Desc react-transiton group으로 BottomSheet등을 만들 때 Lottie리소스가 아예 사라졌다가 다시 생기는 등의 이슈가 있을 수 있다. lottie영역에 고정 height를 줄경우 리소스가 아예 사라지지는 않지만, 애니메이션이 유지된 채로 bottom sheet가...

SoYoung210