1. Device 내장 갤러리 접속 : expo의 imagePicker라는 로직이용
(1) 로직
(2) 코드리뷰
내부 코드들인데 async 함수, await 등 pickImage를 구현하는 내부 로직들 중 모르는 keyWord들이 많다.
해당 내용들을 알려면 promise 라는 키워드 부터 공부해야 한다. 이는 시간이 많이 걸리므로, 먼저 이번 강의 전 내용을 빠르게 정리한 후 돌아와서 공부하도록 하겠다.
(3) 새롭게 알게 된 것 - image Picker 로직 분해를 통하여
https://docs.expo.dev/versions/latest/sdk/imagepicker/
2. imagePicker가 하나의 사진 뿐만 아니라 여러 개의 사진을 가지고 있을 수 있도록 커스터마이징
+ imagePicker가 받은 여러 사진들을 화면에 띄우기 (flatList 이용)
(1) 로직
(2) 코드리뷰
setImage에서 기존 image 배열의 원소들을 넣기 위해 전개 연산자 사용, 그 후 result (현재 찝은 거 ) 넣음.
(3) 새롭게 알게 된 것
없음
3. 한 줄에 화면 3개 뜨도록 커스터마이징
(1) 로직
(2) 코드리뷰
(3) 새롭게 알게 된 것
Dimensions는 윈도우 창이나 스크린의 크기 높이를 알아내는 API 이다.
같은 방식으로 height도 얻을 수 있다.
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
const ScreenWidth = Dimensions.get('screen').width;
const ScreenHeight = Dimensions.get('screen').height;4. 삭제 로직
(1) 로직
a. 먼저 커스텀 훅 useGallery 내의 상태변수 image를 String 배열에서 객체들의 배열로 바꾸어줘야 한다.
삭제를 위해서 필요한 사진들만의 고유 번호 id를 설정해줘야 해서 구조체 형태로 원소를 바꾸어 주어야 하기 때문이다.
why? 왜 id가 따로 필요한가? uri 값으로 특정해서 사진을 지우면 되지 않나?
갤러리에 똑같은 사진을 2개 올리는 경우를 생각해보자. 만약 uri를 기준으로 사진 삭제 로직이 가동 된다면 둘 중 하나의 사진을 삭제해도 둘 다 삭제될 것이다. 둘은 uri가 같기 때문이다.
그래서 id라는 변수를 객체 내부에 새로 만들어준다.
Lastid를 만들어 배열 마지막 원소인 객체의 id를 알아낸다.
Lastid+1 해서 새로운 사진이 배열에 들어올 때마다 교부한다.
그러면 사진별로 고유한 id가 생긴다.
(2) 코드리뷰
export const useGallery = () => {
const [images, setImages] = useState([]);
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
// 만약에 취소를 누른게 아니라면
if (!result.canceled) {
const lastId = images.length === 0 ? 0 : images[images.length - 1].id;
//id는 1부터 시작하고 배열의 index는 0부터 시작한다. 헷갈리지 말자.
// 여기서는 images[최대길이-1]의 id를 구해 사용한다. index는 따로 사용하지 않는다.
const newImage = {
id: lastId + 1,
uri: result.assets[0].uri,
};
setImages([...images, newImage]); // result의 assets의 첫번째 원소값의 uri를 image 값으로 설정 해달라.
}
};
const deleteImage = (imageId) => {
Alert.alert("이미지를 삭제하시겠습니까?", "", [
{
style: "cancel",
text: "아니요!",
},
{
text: "네!",
onPress: () => {
const newImages = images.filter((image) => image.id !== imageId);
setImages(newImages);
},
},
]);
};
return {
images,
pickImage,
deleteImage,
};
}; const onLongPressImage = (imageId) => {
deleteImage(imageId);
};
const renderItem = ({ item: { id, uri }, idex }) => {
return (
<TouchableOpacity onLongPress={() => onLongPressImage(id)}>
<Image
source={{ uri: uri }}
style={{ width: columnSize, height: columnSize }}
/>
</TouchableOpacity>
);
};(3) 새롭게 알게 된 것
없음.
5. + 버튼을 따로 만들어서 해당 버튼을 누를 시 내장 갤러리로 접속 가능하도록 만들기
(1) 로직
(2) 코드리뷰
return === -1 일 때는 + 버튼 만들고
나머지는 원래 그대로 사진 uri 받아서 사진 구현
(3) 새롭게 알게 된 것
없음
