J.LOG J.LOG

React-Query는 React 애플리케이션에서 데이터 관리를 위한 라이브러리입니다. React-Query를 사용하면 서버에서 가져온 데이터를 캐싱하고, 상태 업데이트와 재요청 등을 자동으로 처리할 수 있습니다. React-Query를 사용하려면 다음과 같은 단계를 따릅니다. React-Query 설치 npm install react-query yarn add react-query Query 컴포넌트 작성 React-Query에서 제공하는 useQuery 훅을 사용하여 데이터를 가져옵니다. useQuery 훅은 data, isLoading, isError 등의 상태 값을 반환합니다. import { useQuery } from 'react-query'; function App() { const { da..

React에서 컴포넌트 렌더링을 수행하는 조건은 1. props가 변경되었을 때 2. state가 변경되었을 때 3. forceUpdate()를 실행하였을 때 4. 부모 컴포넌트가 렌더링 되었을 때 React 컴포넌트는 기본적으로 부모 컴포넌트가 렌더링 혹은 리렌더링되면 변경된 내용이 없더라도 자식 컴포넌트들도 리렌더링이 일어난다. 불필요한 렌더링이 발생하면 당연히 성능 저하, 손실이 발생하게 되는데 렌더링을 최적화하여 손실을 줄이는 방법을 알아보자! 1. state 선언 위치 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것만으로도 리렌더링 횟수를 줄일..