요약 // Bad const queryClient = new QueryClient(); queryClient.invalidateQueries(); // Good const queryClient = useQueryClient(); queryClient.invalidateQueries(); React Query에 대한 소개 React Query는 데이터 관리와 캐싱을 위한 강력한 도구로, 애플리케이션에서 데이터를 효율적으로 관리하는 데 큰 도움을 줍니다. 그 중요한 부분 중 하나는 QueryClient 인스턴스의 적절한 관리와 사용입니다. React Query의 QueryClient는 앱 전반에서 데이터 캐싱과 관련된 주요 작업을 처리합니다. 이러한 인스턴스는 앱 내에서 하나의 전역적 상태로 유지되어야 하는..

원인 React에서 한글을 입력할 때 두 번 입력되는 오류가 발생하는 경우가 있습니다. 이 오류는 한글이 자음과 모음으로 이루어져 있기 때문에 발생합니다. 자음과 모음을 입력할 때, IME가 입력 중임을 나타내는 isComposing 상태가 됩니다. 이 상태에서 또 다른 키가 입력되면, IME는 해당 키를 모음으로 인식하여 한 글자로 처리합니다. 해결 방법 이 오류를 해결하려면, isComposing 상태를 확인하여 이벤트를 처리하는 방법을 사용할 수 있습니다. isComposing 상태가 true인 경우, 이벤트를 무시하거나, 다른 처리를 수행할 수 있습니다. // isComposing 상태를 확인하여 이벤트를 처리하는 예 function MyInput(props) { const [value, setV..

React + webpack5 + TypeScript는 React 개발을 위한 강력한 조합입니다. webpack5는 React 애플리케이션을 빌드하고 배포하는 데 필요한 모든 도구를 제공하며, TypeScript를 사용하여 React 애플리케이션의 코드를 더 안전하고 유지 관리하기 쉽게 만들 수 있습니다. 이 글에서는 React + webpack5 + TypeScript를 빠르고 쉽게 세팅하는 방법을 소개합니다. CRA(Create React App)를 사용하지 않고, 직접 세팅을 진행하므로, React 개발에 대한 기본적인 이해가 있는 경우 누구나 따라 할 수 있습니다. 여러 블로그 글에서 세팅 방법을 찾아볼 수 있지만, 버전 차이 등 다양한 이유로 잘 안될 때가 있어서, 내가 직접 작성해 보려고 합니..

살펴보기 React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리에는 폼의 상태를 추적하는 데 사용되는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다. useWatch 함수 useWatch 함수는 폼의 입력 값이 변경될 때마다 특정 작업을 수행할 수 있는 함수입니다. 이 함수는 다음과 같은 방식으로 사용됩니다. import React, { useState, useEffect, useWatch } from "react"; import { Controller, useForm } from "react-hook-form"; const MyForm = () => { const { control, register, handleSubm..

안녕하세요! 👏 지난 글에 이어서 Atoms(재료)를 만들어보겠습니다. 목차 📋 기본 세팅 Atoms 생성 - 1 Atoms 생성 - 2 Molecules 생성 Organisms 생성 안녕하세요. 이제 거의 마지막 단계네요. Organisms는 Atoms, Molecules를 조합해서 만드는 형태입니다. 먼저, 카드 그룹을 만들겠습니다. 카드 모음(CardGrid) Organisms/CardGrid 폴더를 만들고 index.tsx, style.ts, index.stories.tsx를 만듭니다. // style.ts import styled from 'styled-components'; interface Props { boxWidth?: string; // box 크기 } export const GridI..

안녕하세요! 👏 지난 글에 이어서 Atoms(재료)를 만들어보겠습니다. 목차 📋 기본 세팅 Atoms 생성 - 1 Atoms 생성 - 2 Molecules 생성 Molecules는 Atoms를 조합해서 만드는 형태입니다. 먼저 Atoms를 사용할 수 있게 components 폴더 아래 index.ts를 만들어주세요. src └───components │ └─ atoms │ └─ molecules │ └─ organisms │ └─ index.ts ... // index.ts export { Btn, LinkBtn } from './atoms/Btn'; export { EventDate } from './atoms/EventDate'; export { Icon } from './atoms/Icon'; ex..