본문 바로가기

React7

[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
[React] 유니크한 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] 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
[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
[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
[React] 절대경로 사용하기 한 파일에서 다른 파일을 가져오기 위해서 import 구문을 사용합니다. import를 할 때, 상대 경로를 사용하다보면 파일 위치가 멀 경우 긴 경로를 사용하기도 합니다. import Header from '../../../../../../../directory/Header'; 이렇게 되면 어떤 디렉토리에 있는 어떤 파일인지 한번에 가늠하기 어렵고, 폴더를 찾는데에 긴 시간을 들일 수도 있습니다. 이러한 상황을 방지하기 위해 절대경로를 사용하여 import 하는 방법에 대해 정리해보도록 하겠습니다! 절대 경로를 사용하는 방법은 간단하며 문서를 통해서도 빠르게 확인해볼 수 있습니다. javascript를 사용하는 프로젝트라면 jsconfig.json에, typescript를 사용하고 있다면 tsconfi..
2021. 12. 14. React