Front-End: Web (163) 썸네일형 리스트형 [React] Error: Rendered more hooks than during the previous render 이슈/원인 Rendered more hooks than during the previous render 이전 렌더링에서 호출된 hooks보다, 현재 렌더링에서 호출된 hooks가 더 많은 경우에 발생하는 에러 React는 Hook이 호출되는 순서에 의존한다 React는 Hook이 호출되는 순서에 의존한다. Hook이 함수의 상태를 기억하기 위해서, 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져온다. 따라서 렌더링되는 순서가 동일해야 React가 locale state를 각 Hook에 연동할 수 있다. 즉, Hook가 매 렌더링마다 동일한 순서로 동일한 개수만큼 호출을 보장 받아야한다. 그래서 Hook을 조건문, 반복문, 함수 안에서 작성하는게 금지되어 있고, 컴포넌트 최상단에서 호출하.. [CSS] Background 속성 작성 순서: The Order of the Background Shorthand Property Background 속성 작성 순서 background의 속성 중 여러 속성을 모두 사용하는 도중에, background만을 사용하여 한 줄로 합치고 싶었다. background-image background-size background-position background-color background-repeat ... 다섯 가지를 섞어서 background의 값으로 넣었는데 잘 안되어서 "The Order of the Background Shorthand Property" 검색어로 찾아보게 되었다. 결론적으로, When using the shorthand property the order of the property values is: 1. background-color 2. background-im.. [TypeScript] Partial & Required / Record / Exclude & Extract Partial 제네릭 타입 T에 대해 기존의 타입은 유지하되, 모든 프로퍼티들을 Optional하게 변경함 type Partial = { [P in keyof T]?: T[P]; } 예제 필수 타입과 Optional 타입을 구분해서 사용해야 하는 경우에 응용하면 좋을 것 같다. type UserInformation = RequiredUserInformation & Partial; interface RequiredUserInformation { id: string; uid: string; name: string; } interface OptionalUserInformation { age: number; profile: string; phone: string; } Required Partial과 반대되는 개.. [Next.js 13] Image에서 auto width or height로 지정하기 width, height = 0 으로 주고, sizes는 100%나 100vw로 지정한다. 그리고 style로 width, height를 지정하면 된다(둘 중 하나를 auto로 지정) [TypeScript] type이 없는 모듈을 사용할 때 발생하는 에러 해결하기 에러 원인: @rumess/react-flip-countdown은 type을 제공하지 않기 때문 해결 방법 방법-1 tsconfig.json에 noImplicitAny 를 추가하면 해결. "noImplicitAny": false noImlicitAny 암묵적으로 any 타입을 가지는 것을 허락하지 않음. false로 설정하는 경우? 기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 경우. 이를 제외하면 true로 설정하는 것이 좋다. 위의 이유에 따라서 noImlicitAny는 사용하지 않는 것이 좋다고 판단. 방법-2 node_modules/@rumess/react-flip-countdown/dist에 index.d.ts 파일을 생성하고, declare module '@rumess/react.. zustand: subscribeWithSelector로 subscribe하기 특정 state가 바뀌었을 때마다 어떤 action을 해야하는 경우 (subscribe), subscribeWithSelector 미들웨이를 사용하면 된다. subscribeWithSelector subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe 사용법 미들웨어 사용 import { subscribeWithSelector } from 'zustand/middleware' const useDogStore = create( subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })) ) subscribe 작성 // 'paw'가 변경되었는지 감시.. shallow로 zustand 최적화하기 Intro 최상단에 Home 컴포넌트가 있고, 하위로 다양한 컴포넌트가 있는 구조가 있다고 하자. 그럼 하위 컴포넌트에서 상태값이 바뀔 때마다 Home 컴포넌트도 리렌더링된다. Home |-- Memo |-- Summary |-- Dialog ㄴ-- ... 이를 방지하고자 zustand에서는, shallow를 제공한다. shallow 기본적으로 zustand는 엄격한 비교(old === new)로 변경사항을 감지한다. 그래서 state가 변경될 때마다 컴포넌트가 리렌더링된다. const nuts = useBearStore((state) => state.nuts) const honey = useBearStore((state) => state.honey) 만약 state가 하나의 객체에서 일부 state들을.. [React-Query] createJSONStorage createJSONStorage 스토리지 종류 선택 default값은 localStorage 세션 스토리지를 사용하고 싶은 경우엔, sessionStorage를 입력한다. import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' const useFishStore = create( persist( (set, get) => ({ fishes: 0, addAFish: () => set({ fishes: get().fishes + 1 }), }), { name: 'food-storage', // unique name **storage: createJSONStorage(() => sessionSto.. 이전 1 2 3 4 ··· 21 다음
