[7/11 TIL]useQuery로 받아온 값 input value에 넣기

포기하고 싶어서 돌아버리는 줄 알았다.

뭔가 비동기 통신 많이 어렵다. axios도 잘 모르겠다. 찾아봐도 알고 싶은 내용은 나오지도 않고 AI는 헛소리한다. 각잡고 공부해볼까 했는데 자료도 많이 없다. 이상하게 해결하고 있는 느낌을 지울 수가 없다.

외부 데이터를 받아오기 시작하니 useEffect를 쓸 일이 많아질 듯하다

문제사항 1

state가 data를 불러오는 것 보다 먼저 호출되기 때문에 data의 값이 불러와져도 state의 값이 빈값으로 나온다.

➡️ useEffect를 사용해서 data가 불러와지면 setState로 상태를 업데이트 시켰다.

    let { pathname } = useLocation();
    pathname = pathname.replace('/updateTodo/', '');
    const { isLoading, isError, data } = useQuery(['content', pathname], () =>
        getContent(pathname)
    );
    useEffect(() => {
        if (data) {
            const todo = data[0];
            setTitle(todo.title);
            setContent(todo.content);
        }
    }, [data]);

문제사항 2

수정페이지로 들어가면 params로 받은 id와 같은 data를 호출한다.
호출 받은 data를 input value로 넣어서 수정해줄 생각이었다.
그런데 커스텀훅으로 만든 useInput의 값이 data가 불려와지고 나서 상태가 업데이트 되지 않았다.

➡️ useInput에 들어간 인자는 처음 마운트 단계에서 들어가고 그 위로 data가 불려와져도 업데이트 되지 않는다. 그래서 일단 useInput을 사용하지 않고 data를 호출하는 곳에 useState와 onChange 이벤트를 적어주었다. 된다.

➡️ 정말 수정하고 싶지 않았는데~ (다른 input창들도 수정해야해서...) setValue로 상태 업데이트가 가능하게 수정했다.

updatePage.jsx

const [title, setTitle, titleChangeHandler] = useInput('');

useInput.js

const useInput = (initialValue = '') => {
    const [value, setValue] = useState(initialValue);
    const handler = (e) => {
        setValue(e.target.value);
    };
    return [value, setValue, handler];
};
export default useInput;