인프런 커뮤니티 질문&답변

HyeJung님의 프로필 이미지

작성한 질문수

맛집 지도앱 만들기 (React Native + NestJS)

[5-3] 장소등록하기(2) - 헤더 버튼 추가하기

AddPostScreen 부분에서 useEffect 의존성 배열 관련해서 질문있습니다!

해결된 질문

24.06.03 10:51 작성

·

148

·

수정됨

1

강의를 보다가 해당 useEffect 의존성 배열 부분에 빈 배열을 넣어야 한다고 생각해서 넣었었는데 이러면 등록 버튼 눌렀을 때 에러가 뜹니다.

그러다가 어쩔 때는 등록이 되기도 하네요 왜 이럴까요? 혹시 오타나 제가 잘못 작성한 부분이 있는걸까요?

등록 눌러도 응답이 없길래 onError이용해서 찍어보니

위 사진과 같이 계속 400 에러가 뜨고 있었어요

 

그래서 의존성 부분에 빈배열 빼고 강의에서 작성해주신 것처럼 아무것도 안넣었더니 정상적으로 작동했습니다!

저와 비슷한 생각으로 의존성 관련 질문 주신분 있어서 답변 보니 빈배열 넣어야 한다고 하셨는데 전 왜 에러가 뜰까요? 스스로 해결해 보려다가 아직 부족한게 많아서 글 작성해봅니다!

 

코드도 같이 첨부합니당

https://github.com/HYEJUNGYANG/Matzip

답변 1

1

Kyo님의 프로필 이미지
Kyo
지식공유자

2024. 06. 03. 18:59

의존성배열을 없앨필요는 없고, 빈 배열이나 handleSubmit을 넣어주시면 될것같아요. 그런데 지금 발생하는 에러는 의존성배열과 관련된 문제가 아닐거예요. HyeJung님의 다른 코드에는 문제는 없어보이고 400번 에러가 발생하는데 잘못된 값을 넣었거나, 필수값이 누락된건 아닐까요? 예를들어 제목을 입력하지않아도 400 에러가 발생합니다!

좀더 정확한 에러메세지를 보려면, error.response.data.message 에 에러메세지가 담기기때문에 아래와 같이 찍어보면 되는데 한번 확인해보시겠어요?

    createPost.mutate(
      {address, ...location, ...body},
      {
        onSuccess: () => navigation.goBack(),
        onError: error => console.log('에러메세지입니다:', error.response?.data.message),
      },
    );
HyeJung님의 프로필 이미지
HyeJung
질문자

2024. 06. 03. 22:07

handleSubmit 넣으니까 잘 됩니다! 그런데 제목이나 내용 입력할 때마다 useEffect가 계속해서 호출되는 것 같은데 이 부분은 신경 안쓰고 계속 진행해도 괜찮을까요?

Kyo님의 프로필 이미지
Kyo
지식공유자

2024. 06. 03. 22:15

어떤부분때문에 에러가 발생했는지 한번 찍어보세요!

HyeJung님의 프로필 이미지
HyeJung
질문자

2024. 06. 03. 22:16

빈배열 넣었을 때는 제목, 내용 전부 입력해도 등록버튼만 누르면 제목이 비었다는 에러가 떴었습니다!

Kyo님의 프로필 이미지
Kyo
지식공유자

2024. 06. 03. 22:30

제가 빈배열이나 handleSubmit을 넣으라고 잘못 설명했는데, useEffect가 참조하는 handleSubmit이 업데이트될 수 있도록 넣어주는게 맞겠네요!

강의에서는 의존성배열을 넣지않는데 이부분이 누락된것같네요. 깃헙코드에는 반영이 되어있습니다! 함께 참고해주세요.

HyeJung님의 프로필 이미지
HyeJung
질문자

2024. 06. 03. 22:42

감사합니다!! 참고해서 진행할게요 감사드려요

HyeJung님의 프로필 이미지

작성한 질문수

질문하기