이미지업로드 동작없음
안녕하세요 강사님
제가 이미지 업로드 강의를 따라 구현하고 있는데요
사진 추가 버튼을 클릭해도 아무런 액션이 일어나지 않는데
혹시 그게 제 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;
답변 2
0
안녕하세요, 인프런 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라이브러리를 사용 중인 것 같으니, 해당 라이브러리가 설치 및 링크가 제대로 되었는지 확인하세요.
관련된 유사한 질문들이 다음과 같습니다. 해당 질문들이 문제 해결에 도움이 되기를 바랍니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
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





