[react-query, ] invalidateQueries, 에러 박스

리액트 쿼리

const queryClient = useQueryClient();

... 

queryClient.invalidateQueries("쿼리키");

useMutation에서는 이렇게해서 해당 쿼리키에 대해 무효화를 시킬 수 있다!

무효화를 하면 이 데이터는 더 이상 싱싱하지 않아...!하고 refetching이 진행된다. 

 

useQuery에서처럼 refetch를 꺼내올 수 없기에 당황했었는데, 이런 방법이 있고! 또 어디에서든 할 수 있어서 편하다.

 

 

 

에러 박스

const data = {
	name: "",
    age: "",
    }

const CheckError = () => {
    const errorData: any =
      {
      name: false,
      age: false,
      }
      
    for (let key in data) {
      const value = data[key];

      if (value === "") { // 값이 비어있다면 
        errorData[key] = true; 
      } else { // 값이 있다면
        errorData[key] = false;
      }
    }
    // errorData를 바꿔놓고 Error라는 state에 errorData로 갈아끼운다.
    setError(errorData);
  };
  
  ... // presenter
  
  <S.InfoInput
                required
                pattern=".*\S.*"
                placeholder={`입력하세요.`}
                onChange={(event: any) =>
                  props?.onChangeInput &&
                  props?.onChangeInput(`${el.name}`, event)
                }
                error={props?.error[`${el.name}`]}
                value={props?.data[`${el.name}`]}
              />

데이터들이 들어있는 객체가 있고, 그 안에서 하나하나가 값을 갖고 있으면 error가 false, 갖고 있지 않으면 true로 만들기

 

그리고 그 error를 내려서 error면 빨간 테두리가 생기게 했다. 

 

뭔가 너무 어려웠다... 

객체를 다루는 게 힘들었다. 

 

함수 밖에서 for문을 돌려버리는(,,,) 실수도 있었다. 

이러면 무한 리렌더가 발생한다. 

 

<DataSelect
              selectData={
                props.reset
                  ? props.resetData && props.resetData[`${item.name}`]
                  : props.data && props.data[`${item.name}`]
              }
              options={props?.scanInfo && props?.scanInfo[`${item.name}`]}
              isEdit={props?.isEdit}
              isNew={true}
              error={props?.error[`${item.name}`.replaceAll("_", "")]}
              onChange={(event: any) =>
                props?.onChangeInput &&
                props?.onChangeInput(`${item.name}`.replaceAll("_", ""), event)
              }
              value={props?.data[`${item.name}`]}
            />

Select 코드는 굉장히 더 ... 보기 힘들다! 

그리고 백엔드와 주고받는 데이터 중에 어떤건 스네이크 케이스, 어떤건 소문자로만 되어있어서 _를 ""로 대체하는 등의 방법도 써야했다.

 

지금 힘든 것 중 하나는 어디까지 부탁을 드려도 되고 어디까진 내가 해야하는지에 대한 것이다... replace정도야 쓸 수 있지만 소문자로만 된 걸 스네이크 케이스로 바꿀 순 없으니까, 이런건 통일을 부탁드려도 되는건지 그런 것에 대하여!

 

백엔드에 대해 알지 못하니까 불편하고, 어느정도는 공부하고 싶다는 생각이 든다.