Eunseo Choi

React Query 설치 npm install react-query React Query Provider 사용 : 전역적으로 사용하기 위해 최상위 컴포넌트에 React Query Provider로 감싸기. import { QueryClient, QueryClientProvider } from 'react-query' const queryClient = new QueryClient() export default function App() { return ( ) } useQuery Hook 사용 : useQuery는 API를 호출하고 데이터를 가져올 수 있으며, 쿼리 키와 API를 호출하는 함수를 전달받는다. useQuery는 자동으로 API를 호출하고 데이터를 캐시한다. 만약 캐시된 데이터가 이미 있으면..

React Query란? React Query란 데이터를 가져오고 관리하는 라이브러리이다. React 애플리케이션에서 Redux 또는 Recoli과 같이 전역 상태 관리 라이브러리를 통해 데이터 관리하는 데에 수월함을 느낄 수 있었다. 그러나 이러한 라이브러리는 클라이언트 측 데이터를 관리하기에는 적합할지라도 서버 측 데이터를 관리하기에는 적합하지 않았다. 이러한 문제점을 해결해 주기 위해 React Query 라이브러리가 등장했으며 서버 측 데이터에 의존성이 높은 애플리케이션은 React Query 라이브러리를 사용한다. 💡 React Query는 서버 상태를 관리하기 위한 라이브러리이다. React Query와 Redux의 차이점 React Query와 Redux 모두 React 애플리케이션의 상태 ..

React Router create-react-app을 통한 리액트 프로젝트를 작업하면서 가장 먼저 접하는 파일은 아마 App 파일이 아닐까싶다. App 파일에는 대부분 라우트 작업을 다루고 있으며 라우트의 짝꿍 라우터에 대해 자세히 공부해보자. 개발을 하면서 가장 먼저 확인해야할 것은 바로 공식 문서다. Client Side Routing React Router enables "client side routing" 리액트 라우터는 "클라리언트 사이드 라우팅"을 가능하게 한다. 사용자가 URL을 직접 입력하거나 클릭했을 때 서버에 요청을 보내지 않고 리액트 앱이 업데이트를 해준다. 브라우저가 URL에 대한 새로운 document를 요청하여 새로운 페이지를 렌더링하는 것이 아니기에 더욱 역동적인 UI를 가..

[React] Component Life-cycle ▷ Class형 컴포넌트의 liftcycle 1. componentWillMount(){ //component(render)가 실행되기 전에 할 일... } 2. render() 2-1. shouldComponentUpdate(new값, 상태) //기본값 true, false >> update 여부 결정 2-2. componentWillUpdate() //업데이트를 하기 전에 할 일 2-3. componentDidUpdate() //업데이트를 한 후에 할 일 3. componentDidMount() { //component(render)가 실행된 후 } 4. componentWillUnmount() { // component(render)가 삭제된 후 ..

[React] 클래스 컴포넌트 (class) 클래스 컴포넌트의 기본 구조 import React, { Component } from 'react'; class classComponent extends Component{ state = { example = '' } render(){ return ( {this.state.example} ) } } export default classComponent class형으로 Component를 extends 한다. state를 설정 render() 안에 return 하기 state 값 접근 → this.state state 값 변경 → this.setState() [React] 함수형 컴포넌트 (Hooks) 함수형 컴포넌트의 기본 구조 import React fro..