❓ React에서 useRef을 사용하는 목적 2가지 1. 리액트에서 DOM 요소에 직접 접근해야 할 필요가 있을 때 -> 요소에 포커스를 주거나, 원시 DOM API를 사용해야 할 때 useRef를 사용. function TextInputWithFocusButton() { // input 엘리먼트에 접근하기 위한 ref를 생성합니다. const inputEl = useRef(null); // 버튼 클릭 시 input 엘리먼트에 포커스를 줍니다. const onButtonClick = () => { // `current` 프로퍼티가 실제 DOM 요소를 가리킵니다. inputEl.current.focus(); }; return ( {/* ref 속성을 통해 input 엘리먼트와 ref를 연결합니다. */}..

❓React Query - 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리 - 컴포넌트 내부에서 간단하고 직관적으로 API 사용 가능 - 데이터 캐싱(데이터의 복사본 저장) -> 동일한 데이터에 대한 반복적인 비동기 데이터 호출 방지 -> 서버에 대한 부하를 줄임 - 최신데이터(fresh) 기존의 데이터(stale) - Client 데이터는 상태 관리 라이브러리가 관리, Server 데이터는 리액트 쿼리가 관리 ❇️ App.tsx or index.tsx 파일에서 QueryClientProvider를 사용해서 모든 컴포넌트를 감싸기 import React from 'react' import ReactDOM from 'react-dom/client' import..

❓ useEffect React의 useEffect 훅은 함수형 컴포넌트에서 부수 효과(side effects)를 수행할 수 있게 해주는 훅입니다. 클래스 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 역할을 합니다. useEffect는 데이터 fetching, 구독(subscriptions), 수동으로 DOM을 조작하는 작업 등을 수행할 때 사용됩니다. useEffect는 두 개의 인자를 받습니다: Effect를 수행하는 함수: 이 함수는 컴포넌트 렌더링 이후에 실행됩니다. 만약 이 함수에서 뒷정리(cleanup) 함수를 반환한다면, 컴포넌트가 언마운트되거나 업데이트되기 전에 해당 뒷정리 함수가 실행됩니다..

❓Redux - 순수 함수인 리듀서를 통해 상태 변경 - 러닝커브가 높음 - 상태 변경을 위한 코드가 많이 필요 - 풍부한 커뮤니티 ❓Recoil - 동시성 모드 지원 - 상태의 부분적인 업데이트 -> 컴포넌트의 재렌더링 최적화 - 비동기 처리를 추가적인 라이브러리 없이 리코일 안에서 가능 - 내부적으로 캐싱 지원 -> 동일한 atom 값에 대한 내부적으로 메모이제이션된 값을 반환 -> 속도가 빠름 - 배우기 쉬우며 내부접근성 용이, 리액트 문법과 유사 - 리덕스에 비해 쉽고 직관적임 - 작고 가벼운 프로젝트에 적합 - Atom으로 상태 단위, 업데이트와 구독 가능 - 아톰이 여러 군데에서 사용되면 사이드 이펙트 발생 - 아톰과 셀렉터가 많아지면 의존성이 여러 방향으로 엮이면서 예측 어려워짐 - 아직 실..