Conversation
| const handleLoadQuestion = useCallback(async () => { | ||
| try { | ||
| if (!productId) return; | ||
| const data = getQuestions(productId) |
There was a problem hiding this comment.
react-query를 사용하신다면 이부분은 그냥 다음과같이 사용할 수 있습니다!.
- const handleLoadQuestion = useCallback(async () => {
- try {
- if (!productId) return;
- const data = getQuestions(productId)
- return data;
- } catch (error) {
- console.error("Error fetching question:", error);
- }
- }, [productId]);
+ const { data } = useQuery({
+ queryKey: ['getQuestion', productId]
+ queryFn: () => getQuestions(productId)
+ })
prop로 받은 productId에 의해서 변한다면 자동으로 감지하여 쿼리를 실행시킬 것이고, 그 이상 그 이하도 없습니다! 여기엔 다음과같은 정보도 함께 가져올 수있습니다.
const { data, isLoading, isError, refetch } = useQuery({
queryKey: ['getQuestion', productId]
queryFn: () => getQuestions(productId)
})
There was a problem hiding this comment.
자세한 내용을 확인하고싶다면 tanstak-query의 react-query부분 useQuery 문서를 다시한번 읽어보세요!
| const handleDeleteQuestion = useCallback(async (questionId) => { | ||
| try { | ||
| await deleteQuestion(questionId); | ||
| await handleLoadQuestion(); |
There was a problem hiding this comment.
react-query에서 이러한(post, update, delete)들은 useMutation이라는 걸 통해서 컨트롤이 가능합니다.
mutation이 실행 된 뒤에 작성해주신 handleLoadQuestion와 같이 조회를 다시 하고 싶다면, queryClient를 통해 조회할때 사용했던 key값을 통해서 invalidateQueries 함수만 실행시켜주시면 됩니다. 이또한 useQuery와 useMutation 함수의 문서를 다시한번 살펴보세요!
| const { data } = await axios.delete(`/comments/${questionId}`); | ||
| return data; | ||
| } catch (error) { | ||
| console.log('Error fetching questions:'); |
There was a problem hiding this comment.
api의 호출부분을 따로 모듈화해서 작성하신것은 아조 좋습니다.
다만 이렇게 try/catch문에서 catch된 에러를 console.log만 찍어둔다면 여기서만 에러가 처리가 된 것이고 그 상위에서 이 함수를 사용한곳에서는 에러를 확인할 수 없어요.
에러처리를 각 단계마다 하고싶다면 여기서 발생한 에러를 다시한번 throw해주어야 합니다.
react-query를 사용하신다면 이 에러처리를 ErrorBoundary라고 하는 리액트가 선언적으로 에러를 관리하는 방법을 통해서도 제어하는 방법을 확인할 수 있습니다.
| handleDeleteQuestion, | ||
| handlePostQuestion, | ||
| textareaValue, | ||
| setTextareaValue } = useQuestion(productId) || []; |
There was a problem hiding this comment.
마찬가지로 UI와 Business 코드를 분리해서 작성해주신것 좋습니다.
react-query를 사용한다는것은 거의 상태를 서버상태와 클라이언트상태로 분리해서 사용하기 위함이기도 합니다.
서버상태와 클라이언트상태를 나눈다는것은 또다른말로 서버측 데이터를 컨트롤하는 business로직과 ui에서 이벤트를 처리하는 ui로직또한 구분할 수 있다는 의미가 되기도합니다.
함수형 프로그래밍에서는 더 나아간다면 이런식으로 세분화하여 함수들을 정의하고 조합하는 형태로 구성하는 방식을 사용하기도 합니다
There was a problem hiding this comment.
react-query를 사용해주신 부분들이 모두 제가 남겨드린 댓글기준으로 수정될 수 있을것 같아요.
react-query가 제공하는 api들을 보면 useXXX 로 구성된걸 볼 수 있습니다. 이 뜻은 customHooks로 구성될 수 있음을 의미합니다. 그렇다면 dependency도 내부적으로 관리하고있음을 의미해요. 내부구현을 좀더 고민해본다면 어떻게 사용하는게 가장 적절한 방법인지 생각을 해볼 수 있을것 같습니다.
react-query를 사용하는게 꼭 정답은 아니지만, 많은 코드들이 좀더 간편한 방법으로 많은 기능들을 사용할 수 있게 변경되니 참고해주시면 좋을 것 같습니다.
📋 스프린트 미션 요구사항
요구사항
기본 요구사항
공통
프론트엔드 구현 요구사항
중고마켓 페이지
상품 등록하기 페이지
멘토에게