1. useEffect useEffect는 렌더링 결과가 실제 DOM에 반영되고 브라우저가 화면을 그린 이후 실행되는 effect이다. 리액트에서는 이를 passive effect라고 부른다. [특징] DOM 업데이트 이후 실행된다. 일반적으로 브라우저 paint 이후 실행된다. 실행이 비동기적으로 예약되므로 렌더링을 차단하지 않는다. UI가 먼저 사용자에게 보여진 후 effect가 실행된다. 이러한 특성 때문에 데이터 fetching, 이벤트 리스너 등록 및 해제와 같이 레이아웃에 즉각적인 영향을 주지 않는 작업에 적합하다. im

1. useQuery란? useQuery는 비동기 데이터를 관리하는 훅으로 API 요청을 단순화하고 캐싱, 로딩/에러 상태 관리까지 자동으로 처리해준다. 기존에는 useEffect와 useState를 조합하여 데이터를 불러와야 했지만 useQuery를 사용하면 훨씬 간결하게 데이터를 관리할 수 있다. 또한 캐싱, 자동 리페치, 서버 상태 관리 기능을 제공하여 서버 데이터 관리의 복잡성을 크게 줄여준다. 이 기능은 TanStack Query 라이브러리에서 제공된다. 2. 설치 및 기본 설정 useQuery를 사용하기 위해 먼저 Tan

리액트는 폼(Form) 요소의 데이터를 관리하는 방식에 따라 제어 컴포넌트와 비제어 컴포넌트로 구분한다. 1. 제어 컴포넌트 (Controlled Component) 폼 요소의 값을 리액트의 state가 관리하는 방식이다. state가 단일 데이터 출처가 되며 폼 입력 요소의 value 속성은 state에 의해 결정된다. 사용자의 입력이 발생하면 onChange 이벤트를 통해 state를 업데이트한다. import { useState } from 'react';export default function Controlled() {

1. Redux란? Redux는 자바스크립트 애플리케이션의 상태를 관리하기 위한 오픈 소스 라이브러리이다. 주로 리액트와 함께 사용되지만 리액트에 의존하지 않기 때문에 다른 프레임워크나 바닐라 자바스크립트에서도 사용할 수 있다. 리액트 애플리케이션의 규모가 커질수록 컴포넌트 간 데이터 전달이 복잡해질 수 있으며 부모 컴포넌트에서 자식 컴포넌트로 여러 단계에 걸쳐 props를 전달해야 하는 현상을 Props Drilling이라고 한다. Redux는 이러한 문제를 해결하기 위해 전역 상태를 하나의 저장소에서 관리하도록 설계되었다. [R