nextjs의 끝판왕이라 생각되는 React-Query를 개념적으로만 다루어보겠습니다. React-Query는 React 앱에서 비동기 로직을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 이전에 Redux와 Saga를 사용하여 비동기 관련 로직을 다뤘던 것과 다른 비동기 작업을 접근하고, 다양하고 유용한 기능을 제공하고있습니다. React-Query React-Query는 비동기 데이터 요청과 관련된 여러 가지 문제점을 해결하기 위해 등장했습니다. 이 라이브러리는 전역 상태 관리, 캐싱, 리패칭 등을 자동으로 처리하여 개발자가 데이터의 무결성에 직접 신경 쓰지 않아도 되도록 돕습니다. 기존에는 React 애플리케이션에서 비동기 데이터를 다루기 위해 Redux나 Context API와 함께 자체적..

Introduction 이번 글에서는 rules of Hooks에 이어서, 기본이 되는 Basic Hooks에 대해서 소개합니다. 1. useState 컴포넌트에 상태 변수를 추가할 수 있게 해주는 기능입니다. useState는 함수 컴포넌트 내에서 상태 변수를 선언하고 업데이트하는 데 사용됩니다. 다음은 기본적인 사용법입니다: import { useState } from "react"; export default function Home() { const [count, setCount] = useState(0); return ( Next.js Example setCount(count + 1)}>Click me! Clicked {count} times. ); } 조건부 랜더링으로 사용된 예 const [..

Introduction 이번 글에서는 React에서 Hook의 규칙에 대해 알아보고 또 알려진 Hook은 무엇이 있는지 알아보고자 합니다. 1. Rules of Hooks [1] 원문글링크 Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks는 React 16.8에서 새롭게 추가된 기능입니다. 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용할 수 있게 해줍니다.. + React 16.8 버전은 2019년 2월 6일에 릴리스되었습니다 Hooks are JavaScript functions, but you need to follow two..

Introduction 사소한 Lint 설정 때문에 시간 낭비했던 것들을 Error 위주로 간략히 기록하고자 합니다 1. 오류 Error: A space is required after '{'. @typescript-eslint/object-curly-spacing Error: A space is required after '}'. @typescript-eslint/object-curly-spacing 2. Prettier Lint 설정 { "bracketSpacing": true } // 위 소스 추가시 변경점 차이 import {IconType} from 'react-icons/lib'; // false import { IconType } from 'react-icons/lib'; // true Pr..