리액트에서의 상태란?

리액트에서의 "상태(state)"는 컴포넌트의 현재 상황을 나타내는 정보로, 컴포넌트의 렌더링, 사용자의 상호작용, 앱의 데이터 흐름 등을 관리하는 데 사용됩니다. 상태는 컴포넌트 내부에서 동적으로 변경될 수 있는 데이터를 의미하며, 상태가 변경될 때마다 리액트는 컴포넌트를 다시 렌더링하여 사용자 인터페이스를 최신 상태로 유지합니다.

간단히 말해, 리액트의 상태는 컴포넌트의 "기억장소" 같은 것으로, 애플리케이션의 현재 상태를 반영하는 데이터를 저장하고 있습니다. 사용자의 입력, 서버로부터의 응답 등에 따라 변할 수 있으며, 이를 통해 동적인 사용자 인터페이스를 구현할 수 있습니다.

서버 상태와 클라이언트 상태

리액트에서의 상태는 크게 두가지로 나뉘며 다음과 같이 간단하게 요약할 수 있습니다.

• 서버 상태: API 호출을 통해서 반환되는 데이터를 통해 생성되는 상태 입니다.
• 클라이언트 상태: useState 또는 상태관리 라이브러리(Redux, Zustand) 등을 통해 생성되고 관리되는 상태 입니다.

Tanstack Query (이하 React Query)

React Query는 이러한 상태 중에서도 서버 상태를 관리하는데 사용 되는 라이브러리 입니다. React Query를 사용하게 서버 상태에 대해 다음과 같은 작업을 간편화 할 수 있습니다.

• fetching
• caching
• synchronizing

사용법 예시

다음과 같이 간편하게 사용할 수 있습니다:

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

// -------------- react query initialize code --------------
const queryClient = new QueryClient()
// -------------- react query initialize code --------------

export default function App() {
  return (
  // -------------- react query initialize code --------------
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
    // -------------- react query initialize code --------------
  )
}

function Example() {
	// -------------- react query use example code --------------
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('<https://api.github.com/repos/TanStack/query>').then((res) =>
        res.json(),
      ),
  });
  // -------------- react query use example code --------------

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

React Query의 중요한 3가지 개념

• Queries