사과먹는중
당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • 알고리즘
  • 팀프로젝트
  • React-hook-form
  • 배포
  • 팀플
  • javascript
  • 리액트
  • algorithm
  • 배열
  • 코드캠프
  • HTML
  • 자바스크립트
  • 프론트엔드
  • typescript
  • graphql
  • 코딩 부트캠프
  • 부트캠프
  • 프로그래머스
  • emotion
  • react
  • 팀 프로젝트
  • ssg
  • javascrpit
  • next.js
  • 공통 컴포넌트
  • 회고
  • refreshtoken
  • JS
  • 코딩

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니
프론트엔드✏️/개인공부

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

프론트엔드✏️/개인공부

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

2022. 9. 16. 14:38
728x90
반응형

리액트 쿼리

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정도야 쓸 수 있지만 소문자로만 된 걸 스네이크 케이스로 바꿀 순 없으니까, 이런건 통일을 부탁드려도 되는건지 그런 것에 대하여!

 

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

 

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 개인공부' 카테고리의 다른 글

useEffect vs useLayoutEffect  (1) 2022.09.19
[react-to-print] 리액트 컴포넌트 프린트하기 💌  (0) 2022.09.16
[react-query] 검색 기능  (0) 2022.09.15
[react-csv] react 엑셀 파일로 내보내기  (0) 2022.09.07
[공통 컴포넌트,css] select - defaultValue 빈값으로 설정  (0) 2022.09.07
    '프론트엔드✏️/개인공부' 카테고리의 다른 글
    • useEffect vs useLayoutEffect
    • [react-to-print] 리액트 컴포넌트 프린트하기 💌
    • [react-query] 검색 기능
    • [react-csv] react 엑셀 파일로 내보내기
    당근먹는하니
    당근먹는하니

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.