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

안녕하세요 강사님

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

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

혹시 그게 제 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;