React에서 커스텀 훅(Custom Hook)을 작성하면 컴포넌트 간의 로직을 재사용하고 코드를 정리할 수 있습니다. 커스텀 훅은 함수명이 use로 시작하고, 다른 훅을 사용하거나 상태를 관리하는 등의 로직을 포함합니다. 이 글에서는 React 컴포넌트에서 커스텀 훅을 작성하고 활용하는 방법을 알아보겠습니다. 커스텀 훅의 구조 커스텀 훅은 보통 다음과 같은 구조를 가집니다. 커스텀 훅 작성 예제 예제 1: 로컬 스토리지 상태 … Read more
TypeScript는 미리 정의된 제네릭 타입인 Utility Type을 제공하여 코드 작성과 타입 정의를 더욱 효율적으로 만들어줍니다. 이러한 유틸리티 타입은 기존 타입을 변환하고 재구성하는 데 사용되며 코드의 가독성과 안정성을 향상시킵니다. 이번 포스팅에서는 몇 가지 주요 TypeScript Utility Type을 자세히 살펴보겠습니다. 1. Partial<Type>: 선택적 속성 만들기 Partial<Type> Utility Type은 주어진 타입의 모든 속성을 선택적으로 만듭니다. 이것은 객체의 일부 … Read more
이번 포스팅에서는 React와 TypeScript를 활용하여 이메일 입력 컴포넌트를 작성하고, 부모 컴포넌트의 폼에서 사용하는 방법을 살펴보겠습니다. 1. 이메일 입력 컴포넌트 작성 이메일 입력 컴포넌트는 EmailInput으로 정의됩니다. value와 onChange라는 두 가지 props를 받습니다. value는 입력된 이메일 값을 나타내며, onChange는 입력값이 변경될 때 호출됩니다. 이 컴포넌트는 입력값의 유효성을 검사하여 유효하지 않은 경우 경고 메시지를 표시합니다. 2. 부모 컴포넌트에서 … Read more
TypeScript는 정적 타입 언어로 JavaScript의 타입 안정성을 향상시키는 도구입니다. 그런데 TypeScript에서 unknown과 any라는 두 가지 다른 타입을 제공하고 있습니다. 이 두 타입은 어떻게 다르며, 어떤 상황에서 어떻게 사용해야 할까요? 이 블로그 포스트에서 그 차이와 각각의 사용 사례에 대해 알아보겠습니다. ‘unknown’ 타입 ‘unknown’ 타입은 TypeScript 3.0 이후에 도입된 상대적으로 새로운 개념입니다. ‘unknown’ 타입은 다음과 같은 특징을 … Read more
TypeScript는 정적 타입 검사를 지원하는 강력한 언어로, 객체 타입을 다룰 때 유용한 다양한 유틸리티 타입을 제공합니다. 그 중 하나인 Omit 타입을 알아보겠습니다. Omit은 특정 객체 타입에서 원하는 속성을 제외하고 새로운 타입을 생성하는 데 사용됩니다. Omit의 기본 구문 Omit 유틸리티 타입의 기본 구문은 다음과 같습니다: 여기서: 예제: 속성 제외하기 아래의 예제를 통해 Omit을 어떻게 활용하는지 살펴보겠습니다. … Read more
TypeScript는 정적 타입을 지원하는 강력한 언어로, 사용자 정의 타입을 정의할 때 주로 type과 interface를 사용합니다. 이들은 비슷한 역할을 하지만 약간의 차이가 있습니다. 이 블로그 포스팅에서는 두 가지의 용도와 차이점을 자세히 살펴보겠습니다. type: 유니온 타입과 복잡한 타입 정의에 유용 type은 다음과 같은 상황에 주로 사용됩니다: interface: 객체의 구조를 정의하고 클래스와 관계 설정 interface는 다음과 같은 상황에 … Read more
Axios는 웹 애플리케이션에서 HTTP 요청을 보내고 응답을 받는 데 사용되는 강력한 JavaScript 라이브러리입니다. Axios의 responseType 옵션은 서버로부터 받아오는 응답 데이터의 형식을 지정하는 데 도움을 주며, 다양한 유형의 데이터를 처리할 수 있게 합니다. 이 블로그 포스팅에서는 responseType 옵션의 다양한 유형과 각각의 사용 용도를 살펴보겠습니다. 1. json 2. text 3. blob 4. arraybuffer 각 responseType 값은 서버로부터 … Read more
React Query는 데이터를 효과적으로 관리하고 가져오는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 데이터 캐싱, 무효화, 다시 가져오기 등을 간단하게 처리할 수 있습니다. 이번 블로그 포스팅에서는 React Query에서 데이터 캐시를 관리하는 데 도움이 되는 useQueryClient 훅과 invalidateQueries 함수에 대해 알아보겠습니다. useQueryClient 훅 이해하기 useQueryClient 훅은 React Query 라이브러리에서 제공하는 훅 중 하나로, 현재 앱의 queryClient … Read more
React Query는 데이터를 관리하고 가져오는 데 탁월한 도구로, useMutation 훅을 사용하여 데이터를 업데이트하고 상태를 효과적으로 관리할 수 있습니다. 이 블로그 포스팅에서는 useMutation 훅의 사용법과 예제를 통해 데이터 업데이트를 살펴보겠습니다. useMutation 훅 기초 useMutation 훅을 사용하려면 먼저 React Query 라이브러리를 임포트해야 합니다. 그리고 다음과 같이 useMutation 훅을 활용하여 데이터 업데이트 함수를 생성합니다. 위 코드에서 useMutation 훅을 … Read more
React Query는 데이터 관리와 가져오기를 쉽게 만드는 라이브러리 중 하나입니다. 이 라이브러리의 useQuery 훅을 사용하면 데이터를 가져오는 동안 이전 데이터를 유지할 수 있는 keepPreviousData 옵션을 활용할 수 있습니다. 이 글에서는 이 옵션의 사용법과 유용성에 대해 알아보겠습니다. keepPreviousData 옵션 소개 useQuery 훅에서 keepPreviousData 옵션은 기본적으로 false로 설정됩니다. 그러나 이 옵션을 true로 설정하면 현재 데이터와 함께 이전 … Read more