리액트는 컴포넌트 렌더링 과정에서 발생하는 부수 효과(side effect)를 처리하기 위해 useEffect 와 useLayoutEffect 훅을 제공한다. 둘 다 렌더링 이후에 실행되지만 실행 시점과 사용 목적에서 차이가 있다. 1) useEffect - 렌더링 결과가 실제 DOM에 반영되고 브라우저가 화면을 그린 이후 실행된다. - 실행이 비동기적으로 예약되기 때문에 렌더링 과정을 막지 않고 UI가 먼저 사용자에게 보인다. 2) useL

useQuery란? useQuery는 비동기 데이터(fetching)를 관리하는 훅으로 API 요청을 단순화하고 캐싱, 로딩/에러 상태 관리까지 자동으로 처리해준다. 기존에는 useEffect와 useState의 조합으로 데이터를 불러왔지만 useQuery만 있으면 훨씬 깔끔하게 구현이 가능하다. useQuery를 사용하기 위해서는 우선 TanStack Query를 설치해야 한다. npm install @tanstack/react-query

폼을 만들 때 상태를 컴포넌트가 관리하는 것을 Controlled 브라우저 DOM에 맡기는 것을 Uncontrolled 라고 한다. 두 방식의 기본 개념과 차이점에 대해 알아보자. [기본 개념] 제어 컴포넌트(Controlled Component) 입력값의 단일 소스를 리액트 state로 두어 렌더링 시 input value가 채워지고 사용자가 타이핑 하면 onChange 함수로 state가 업데이트되어 리렌더링이 일어나는 방식이다. 예측이

리액트에서 상태 관리는 기본적으로 props를 통해 이루어진다. 하지만 애플리케이션이 커지고 컴포넌트가 많아질수록 상태를 여러 컴포넌트에서 공유하거나 깊게 전달해야 하는 상황이 발생하면서 코드가 복잡해질 수 있다. 이러한 문제를 해결하고 상태 관리를 보다 체계적이고 예측 가능하게 하기 위해 등장한 것이 Redux이다. 애플리케이션의 모든 상태를 하나의 중앙 저장소(store)에 보관하고 상태를 변경할 때에는 반드시 액션(action)과 리듀서(