이미지업로드 동작없음

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

[5-5] 장소 등록하기(6) - 이미지 업로드

해결된 질문

작성

안녕하세요 강사님

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

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

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

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

log 를 남겼는데

console.log('useImagePicker');

로그가 찍히는데

console.log('handleChange');

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

AddPostScreen.tsx 에서

이렇게 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

Kyo

지식공유자

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

인프런 AI 인턴

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

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

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

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

컴포넌트에서 이벤트 전달 확인: 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;

라이브러리 설치 확인: 이미지 피커 라이브러리가 제대로 설치되었고, 프로젝트에서 사용 가능한지 확인합니다. react-native-image-crop-picker 라이브러리를 사용 중인 것 같으니, 해당 라이브러리가 설치 및 링크가 제대로 되었는지 확인하세요.

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

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

호갱

질문자

감사합니다.

여기에 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>
  );
}

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

이미지업로드 동작없음