ReactQuery error(+arrow function)

No QueryClient set, use QueryClientProvider to set one
at useQueryClient

React Query는 서버 상태를 관리하는 데에 특화된 라이브러리로, 비동기적으로 데이터를 가져오고 업데이트하는 기능을 제공한다.
이러한 서버 상태는 캐싱, 중복 데이터 요청 처리, 데이터가 오래되었을 때 업데이트, 데이터가 업데이트되었음을 빠르게 반영하는것, 페이지네이션 및 레이지 로딩 데이터 등의 성능 최적화와 메모리 관리 등의 고려할 사항이 굉장히 많다.
QueryClientProvider를 사용하는 이유는 React Query 라이브러리의 핵심인 QueryClient와 관련된 컨텍스트를 어플리케이션에 제공하기 위해서 이다. 이를 통해 React Query를 사용하여 서버 상태를 관리하고 데이터를 효율적으로 가져오고 업데이트할 수 있게 된다.

나는 useMutation을 사용할 때 해당 에러가 나왔는데 이를 해결하기 위해 QueryClientProvider client={queryClient} 로 감싸줬다. 이때 중요한 것은 이 안에 하나의 컴포넌트만 들어 있어야 한다.

        <QueryClientProvider client={queryClient}>
         <OptionColum product={product}> </OptionColum>
        </QueryClientProvider>


-> OK

<QueryClientProvider client={queryClient}>
	<div>
            <h3>옵션선택</h3>
            <OptionList
                options={product.options}
                onClick={handleOnClickOption}
            ></OptionList>

	</div>
</QueryClientProvider>

-> No

화살표 함수 사용 시 주의할점.

보통 화살표 함수는 =>{} 와 같이 중괄호로 감싸지만,

객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣는다.
컴포넌트를 반환할때도 마찬가지로 () 속에 넣는다.

{options.map((option, index) => (
                <li key={option.id} onClick={()=>{onClick(option)}}>
                    <span>
                        {index+1}.{option.optionName}
                    </span>
                    <span>{comma(option.price)}원</span>
                </li>
            ))}

레퍼런스
https://sso-feeling.tistory.com/738
https://tanstack.com/query/latest/docs/react/overview?from=reactQueryV3&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Foverview