inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

이미지업로드 동작없음

해결된 질문

178

호갱

작성한 질문수 20

0

안녕하세요 강사님

제가 이미지 업로드 강의를 따라 구현하고 있는데요

사진 추가 버튼을 클릭해도 아무런 액션이 일어나지 않는데

혹시 그게 제 pc 가 노트북이 아니라 pc 라서 그런걸까요?

 

어디까지 접근하는지 보려고

log 를 남겼는데

console.log('useImagePicker');

로그가 찍히는데

console.log('handleChange');

해당 부분은 로그가 찍히지 않습니다.

AddPostScreen.tsx 에서

<ImageInput onChange={iamgePicker.handleChange} />

이렇게 onChange 로 호출하는데 혹시 잘못된 부분이 있거나

더 살펴봐야될 곳이 있을까요?

function useImagePicker({initialImages = []}: ImagePickerProps) {
  console.log('useImagePicker');
  const [imageUris, setImageUris] = useState(initialImages);
  const uploadImages = useMutateImages();

  const addImageUris = (uris: string[]) => {
    setImageUris(prev => [...prev, ...uris.map(uri => ({uri}))]);
  };

  const handleChange = () => {
    console.log('handleChange');
    ImagePicker.openPicker({
      mediaType: 'photo',
      multiple: true,
      includeBase64: true,
      maxFiles: 5,
      cropperChooseText: '완료',
      cropperCancelText: '취소',
    })
      .then(images => {
        const formData = getFormDataImages(images);

        uploadImages.mutate(formData, {
          onSuccess: data => addImageUris(data),
        });
      })
      .catch(error => {
        if (error.code !== 'E_PICKER_CANCELLED') {
          //에러처리
        }
      });
  };

  return {imageUris, handleChange};
}

export default useImagePicker;

react-native typescript nestjs react-query zustand

답변 2

1

Kyo

핸들러 연결을 깜빡하신건가요? 해결되어 다행입니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Changsu Woo님.

이미지 업로드 버튼을 클릭했을 때 handleChange 함수가 실행되지 않는 문제를 겪고 계시는군요. 우선 useImagePicker 훅이 정상적으로 호출되고 있다는 점은 확인하셨지만, handleChange 함수가 실행되지 않는다고 말씀하셨습니다.

유사한 문제에 대한 해결책은 아래와 같습니다:

  1. 이벤트 핸들러가 올바르게 바인딩되었는지 확인: <ImageInput onChange={imagePicker.handleChange} /> 부분에서 ImageInput 컴포넌트가 제대로 구성되었는지, 그리고 해당 컴포넌트가 onChange 이벤트를 올바르게 전달하고 있는지 확인하세요.

  2. 컴포넌트에서 이벤트 전달 확인: ImageInput 컴포넌트 내부에서 onChange 이벤트를 올바르게 처리하고 있는지 확인합니다. 예를 들어:

    import React from 'react';
    import { TouchableOpacity, Text } from 'react-native';
    
    
    const ImageInput = ({ onChange }) => {
      return (
        <TouchableOpacity onPress={onChange}>
          <Text>이미지 추가</Text>
        </TouchableOpacity>
      );
    };
    
    
    export default ImageInput;
    
  3. 라이브러리 설치 확인: 이미지 피커 라이브러리가 제대로 설치되었고, 프로젝트에서 사용 가능한지 확인합니다. react-native-image-crop-picker 라이브러리를 사용 중인 것 같으니, 해당 라이브러리가 설치 및 링크가 제대로 되었는지 확인하세요.

관련된 유사한 질문들이 다음과 같습니다. 해당 질문들이 문제 해결에 도움이 되기를 바랍니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

호갱

감사합니다.

여기에 onchange 를 빼먹었었습니다.

 

function ImageInput({onChange}: ImageInputProps) {
  return (
    <Pressable
      onPress={onChange}
      style={({pressed}) => [
        pressed && styles.imageInputPressed,
        styles.imageInput,
      ]}>
      <Iconicons name="camera-outline" size={20} color={colors.GRAY_500} />
      <Text style={styles.inputText}>사진 추가</Text>
    </Pressable>
  );
}

react-native-screens 버전 호환 문제

2

153

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

82

1

강의 수강 순서 관련

0

70

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2