Feedback

[wildCodingWarrior]

Overview

• 비밀번호를 이용해서 수정, 삭제까지 추가 기능까지 구현한 좋은 프로젝트입니다.
• 프로젝트의 구조화가 잘 되어있고, Style 파일을 따로 분리해서 관심사도 잘 분리되어 있네요.
• invalideQueries 개념을 잘 이해하고, queryKey도 잘 활용하고 계신 것 같아요.

[wildCodingWarrior]

etc

https://github.com/hgyeom/React-lv5-MyApp/blob/10b2a05c0e46a18c2ea3e25bc4bcc30dda853be2/src/GlobalStyle.js#L2-L7

이 부분은 styled-reset을 사용하시면 더 간결하겠네요.

https://github.com/hgyeom/React-lv5-MyApp/blob/10b2a05c0e46a18c2ea3e25bc4bcc30dda853be2/src/api/posts.js#L1-L36

이 부분은 axios.create를 이용해서 공통 base가 되는 axios를 만들어 관리하는 편이 좋겠습니다.

또 리덕스는 사용 안하는 것 같은데, 지워도 괜찮을 것 같아요.

usePostQueries, usePost라는 이름의 custom hook을 만들어서 query, mutation 부분을 따로 관리하는 방식으로 logic을 더 간결화 할 수 있지 않을까 생각합니다. 충분히 가능하실거에요. 아래는 todos로 만들어본 예시 코드입니다.

export const useTodos = () => {
    const {data: todos} = useQuery("todos", fetchTodos);
    const queryClient = useQueryClient();

    const addTodo = useMutation(addTodo, {
        onSuccess: () => {
            queryClient.invalidateQueries("todos");
        },
    });

    const deleteTodo = useMutation(deleteTodo, {
        onSuccess: () => {
            queryClient.invalidateQueries("todos");
        },
        });

    const updateTodo = useMutation(updateTodo, {
        onSuccess: () => {
            queryClient.invalidateQueries("todos");
        },
        })

    return {todos, addTodo, deleteTodo, updateTodo }
};