본문 바로가기

React8

React useEffectEvent hook 어떤 버전에서 처음 등장했나?React 19.2에서 소개된 Hook입니다. React 19.2 릴리스 포스트와 현재 공식 레퍼런스에 useEffectEvent가 명시되어 있습니다.useEffectEvent는 왜 만든걸까핵심 이유는 Effect 안에 있는 로직이 전부 “반응형”으로 취급되면서 생기는 설계 문제를 줄이기 위해서입니다.React에서 useEffect 내부에서 읽는 값은 원칙적으로 dependency에 들어가야 합니다. 그런데 실제 코드에서는 Effect 전체가 다시 실행될 필요는 없고, Effect 내부의 일부 콜백만 최신 props/state를 읽으면 되는 경우가 많습니다. 이때 기존에는 두 가지 문제가 자주 생겼습니다.dependency를 모두 넣으면 Effect가 불필요하게 다시 실행됨d..
2026. 7. 15. React
Zustand로 상태관리하기 Zustand Docs hook 기반의 상태 관리 라이브러리입니다.Store 생성import { create } from 'zustand'interface BearState { bears: number; increase: (by: number) => void;}const useBear = create((set) => ({ bears: 0, increase: (by) => set((state) => ({ bears: state.bears + by })),})) 필요한 상태값과 메소드 타입을 정의하여 createStore 메소드의 제네릭 타입으로 사용합니다.createStore 파라미터의 set 메소드를 통해 store의 상태값을 업데이트하는 메소드를 정의할 수 있습니다.상태값을 LocalStorag..
2026. 1. 9. React
유니크한 Tanstack Query QueryKey 관리 QueryKeyTanstack Query QueryKey Docs TanStack Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리합니다.쿼리 키는 최상위 배열이어야 하며, 단일 문자열을 포함하는 배열처럼 간단할 수도 있고, 여러 문자열과 중첩된 객체로 구성된 배열처럼 복잡할 수도 있습니다.쿼리키는 JSON.stringify를 사용해 직렬화 가능하고 쿼리 데이터에서 고유하다면 사용할 수 있습니다. 💡 QueryKey로 쿼리 캐싱을 관리하기 때문에 반드시 유니크 하도록 키를 관리해야합니다.간단한 쿼리키// A list of todos useQuery({ queryKey: ['todos'], ... })// Something else, whatever!useQuery({ queryKey: ['somethi..
2025. 10. 1. React
React Hook Form 공식 문서 react-hook-form은 유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리입니다.설치npm install react-hook-form사용 예시import { useForm, SubmitHandler } from "react-hook-form"type Inputs = { example: string exampleRequired: string}export default function App() { const { register, handleSubmit, watch, formState: { errors }, } = useForm() const onSubmit: SubmitHandler = (data) => co..
2025. 10. 1. React
TypeError: dayjs$1 is not a function vite로 생성한 react 프로젝트에서 개발을 완료하고 빌드 후에 아래 명령어를 실행했더니 오류가 발생했습니다.vite previewTypeError: dayjs$1 is not a function빌드를 했을때도 발생하지 않았던 오류인데다가 구글링해봐도 답이 안나와서 찾기 어려웠으나 import 문제임을 알게 되었습니다.beforeimport * as dayjs from 'dayjs';afterimport dayjs from 'dayjs';after와 같이 수정해주면 문제 없이 실행되는 것을 볼 수 있었습니다.
2023. 9. 1. React
CRA로 TypeScript React 프로젝트 생성하기 오늘은 Create-React-App으로 TypeScript 프로젝트를 생성해보겠습니다..!TypeScript 기반의 React 프로젝트를 설정하기 위해서는 여러가지 설정을 변경해야 하지만, 템플릿을 이용하면 훨씬 간편하게 프로젝트를 생성할 수 있습니다. Template$ npx create-react-app "project name" —template typescriptproject name에는 생성하고자 하는 프로젝트의 이름을 넣으면 됩니다.그러면 해당 이름의 폴더 안에 TypeScript 버전의 create-react-app이 생성됩니다. 다음으로, typescript를 사용하면서 필요한 라이브러리들을 설치합니다.$ npm i --save react react-dom typescript$ npm i..
2021. 12. 14. React