TIL_230716 | 굉장히 느리지만 그래도 걷자

---

  오류  

1. 첫번째 오류 : 함수의 body문법을 지키지 않아 발생한 오류

※ 오류메시지 : 

Cannot read properties of undefined (reading 'data')
TypeError: Cannot read properties of undefined (reading 'data')

 

※ 원인 : 함수 main logic이 한 줄일 때 중괄호를 빼거나, 중괄호를 넣을 때는 return을 같이 작성해줘야하는데 이도저도 아니어서 난 오류였음

const Reactquery = () => {
  const { data, isLoading, isError, refetch } = useQuery('posts', () => {
    axios.get('http://localhost:4001/todos');
  });
  .
  .
  .
}

 

※ 고쳐봥

// 이렇게 쓰거나
const Reactquery = () => {
    const { data, isLoading, isError, refetch } = useQuery('posts', () => {
        return axios.get('http://localhost:4001/todos');
    });
    .
    .
    .
}

// 이렇게 쓰거낭..
const Reactquery = () => {
    const { data, isLoading, isError, refetch } = useQuery('posts', () => 
        axios.get('http://localhost:4001/todos')
    );
    .
    .
    .
}

 

※ 이건 오류랑 관계없는 참고!

위의 식에서 axios.get('http://localhost:4001/todos')로 가져온 data는 이렇게 생김

data는 들어있지만 우리가 요리해줄 todos뭉치는data라는 keyName으로 또 들어가있음!!

다른 곳에서 받아오는 데이터는 꼭 내용을 확인해주고 받아오기!

 

2. 두번째 오류 : form안에 form 태그 작성으로 인해 submit button의 e.preventDefault() 작동이 되지 않는 오류

※ 오류메시지 : (사실 이전에 프로젝트 내에서는 오류메시지는 따로 발생하지 않고, 바로 새로고침이 되었었고, 튜터님께 질문을 해보니 form에서는 하나의 버튼만을 submit button이라고 쳐주기 때문에 form안에 form태그를 만들어 submit button이 2개가 되어버릴 경우 하위에 있는 button에 대한 submit event처리는 작동을 하지 않는다고 하셨음(근데 또 잘못들었을지도 모르니까 혹시 이 글을 읽는 분이 계시면 찾아보세염 ^_^;;;). 암튼 튜터님이 간단하게 form 중첩 만들어서 테스트 해보라시기에 해봤고, 이번엔 오류메시지도 나왔음!) 

Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>.

 

※ BAD 예시 (form 중첩)

import React from 'react';
import { styled } from 'styled-components';

const FormTest = () => {
  return (
    <div>
      <StH2>
        form이 겹쳐있을 때 <br /> 두 form의 onSubmit 이벤트가 걸려있는 버튼에서 <br />
        이벤트가 제대로 작동할까{' '}
      </StH2>
      <StOuterForm
        onSubmit={e => {
          e.preventDefault();
        }}>
        <h3>outer form!!</h3>
        <button type="submit">바깥 form 버튼</button>
        <StInnerForm
          onSubmit={e => {
            e.preventDefault(); 
            // 📌 안에 있는 form의 onSubmit에 걸어둔 e.preventDefault()는 미작동!
          }}>
          <h3>innerform!!</h3>
          <button
            onClick={() => {
              console.log('happy day');
            }}>
            중첩된 내부 form 버튼
          </button>
        </StInnerForm>
      </StOuterForm>
    </div>
  );
};

export default FormTest;

const StH2 = styled.h2`
  padding: 20px;
`;

const StOuterForm = styled.form`
  padding: 20px;
  border: 1px solid black;
`;

const StInnerForm = styled.form`
  padding: 20px;
  border: 1px solid black;
  margin-top: 20px;
`;

 

※ 원인 :

오류메시지를 보면 "`<form>` 요소 안에 또 다른 `<form>`요소가 포함될 수 없다."고 나옴. React는 DOM 업데이트시 효율적인 작동을 위해 Virtual DOM을 사용한다. 그러나 가끔식 잘못된 DOM구조가 생성되어 원하지 않는 동작을 일으킬 수 있다. 이 경우 오류가 발생하고, 애플리케이션 작동에 문제가 생길 수 있음.

 

※ 해결방안 : 

대충 요약하자면 form을 중첩해서 쓰면 제대로 작동 안될 수 있으니까 중첩해서 쓰지 말란 소리임!

`<form>`요소 내부에는 되도록이면 `<input>`, `<button>`같은 유효한 폼요소만 쓰라.

 

  질문할 거  

1. 오류2-[참고] : 결국 form 때문인 것 같아서 문제는 아니었던 것 같지만 모달 위에 모달을 작성했었는데 이렇게는 잘 안쓴다고 한다. 디버깅도 어렵고, 여러모로.. 개발자들이 별로 좋아하지 않는 형태라고... 대안으로 추천해주신 방법이 있는데 그건 다시보니 이해가 안가서 질문하러가야함.

 

2. useQuery 사용중 두번째 인자에서 data를 console로 찍어보면 나오는데 useQuery의 return값을 구조분해할당해서 받은 data는 undefined가 나오는 상황 왜그런지 모르겠음..

git commit -m "Feat : home에서 데이터 조회기능 추가 , 현재 날짜별 todolist 상세보기 조회중 dquote> dquote> - 날짜별 todolist 데이터 조회중 오류 발생. home에서와 다른 점이라고는 api 주소뿐이고, 주소를 검색창에 불러왔을 때 잘 불러오지만 const {data, isLoading, isError} = useQuery('oneDayTodo', async () => {}) 어쩌구로 불 러올때는 data가 안찍히고, axios로 get한 걸 response라는 데이터에 따로 저장해서 return response.data해줘야 나옴. . 왜그런지 궁금"

 

 

* 아래는 다른 방법으로 했을 때 잘 나오는 거... 

 

 

  느낀점  

    lv4도 못하고, 아직 리액트 쿼리나 여러가지에 익숙하지도 않았고, 화요일에 뒤늦게 과제를 시작했으면서 과제 우선순위를 생각 안하고 욕심낸 결과 => 마감기한 안에 필수과제 구현도 못하고, 주말에 해내 보려다가 결국 엉키고 엉켜 일요일인 오후 6시부터 새로운 레포지토리에다가 다시 필수기능구현을 하고 있다...

 

    만약에 내 상황을 더 확실하게 인지하고 우선순위를 중요시 여겼다면 과제 제출 기한도 지킬 수 있었을 것이고, 만족스럽진 않지만 남은 시간동안 부족한 부분을 보충하면서 시간활용을 더 잘 할 수 있었을 것이다. 

 

    내가 뭐가 부족한지를 알고, 우선순위를 잘 지키면서 시간분배를 잘하는 건 너무나도 중요하다. 그렇기에 이 짧은 마지막 글에 똑같은 말을 계속해서 반복하는 것이고.....

 

    아무쪼록 내일 팀과제 시작하기 전까지는 필수구현 과제를 끝마쳤으면 좋겠다...