이미지 업로드 구현...성공..
이미지 삭제 구현...성공..
이미지 프리뷰 구현..성공..
지금 시간이 새벽 두시인 만큼 비몽사몽한 정신으로 블로깅을 합니다..
ㅎㅎㅎㅎㅎㅎㅎㅎ
이미지 업로드와 삭제만 하면 되지만 모달창팝업으로 확대도 구현해보고 싶었던 나..
모달도 컴포넌트로 이미지업로드도 컴포넌트로 따로 관리를 하고 있었다. 상태관리를 안쓰고 구현할 방법을 갈구하여 이것저것 시도해보다 성공한다..
타입스크립트는 아직 적응이 안되서 어려운 부분도 있다.
먼저 나의 이미지업로드 컴포넌트 코드
import React, { useState } from "react";
interface Iprops {
modal: any;
}
function UploadFile({ modal }: Iprops) {
const [file, setFile] = useState<string>("");
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files !== null) {
const selectedFiles = event.target.files as FileList;
setFile(URL.createObjectURL(selectedFiles?.[0]));
}
};
const ImageRemove = (): void => {
setFile(src를 기본이미지값 주소를 주었습니다.);
// 렌더링 이미지 기본값으로 변경
};
return (
<div>
<input id="profileImg" type="file" onChange={handleChange}></input>
<input id="delteImg" onClick={ImageRemove}></input>
<img
src={
file
? file
: "src를 기본이미지값 주소를 주었습니다."
}
alt=""
> onClick={modal}
/>
</div>
);
}
export default UploadFile;이미지업로드와 모달창 사용 컴포넌트
export default function UserEdit() {
const [isOpen, setisOpen] = useState(false);
const [isEmage, setisEmage] = useState<boolean | any>(false);
const imgSrc = isEmage.src;
const toggle = (event: any) => {
setisOpen(!isOpen);
click(event);
};
const click = (event: { currentTarget: any }) => {
let clickEmg = event.currentTarget;
setisEmage(clickEmg);
};
return (
<Body>
<StyledContainer>
<EditForm>
<Header>EDIT</Header>
<Profile>
<ImgUpload modal={toggle} />
<LabelFlex>
<label htmlFor="profileImg">이미지 업로드</label>
<label htmlFor="delteImg">이미지 삭제</label>
</LabelFlex>
</Profile>
<Login placeholder="Email"></Login>
<Login placeholder="Password"></Login>
<Login placeholder="Confirm PW"></Login>
<Login placeholder="Name"></Login>
<Btn>저장하기</Btn>
</EditForm>
</StyledContainer>
<ImgView>
<Modal isOpen={isOpen} toggle={toggle}>
<img src={imgSrc} alt=""></img>
</Modal>
</ImgView>
</Body>
);
}
저번에 작성한 모달창 컴포넌트를 사용하여 이미지 확대 프리뷰를 확인할수있습니다.
구현 과정
먼저 이미지업로드 컴포넌트를 불러온 후 "이미지 업로드" 라벨에 htmlFor을 주어 클릭시
이미지업로드 컴포넌트의 input 이 반응 하도록 하였다. id값으로 input을 연결케 해주는
🎈htmlFor🎈 정말 요긴하게 잘 사용하였다. 후후..앞으로도 잘부탁합니다...ㅎㅎㅎ
ㅇㅅㅇ
그러면 이미지업로드 글을 눌렀을때 이미지업로드 컴포넌트 내 인풋이 반응하여 선택창이 뜹니다.
<input id="profileImg" type="file" onChange={handleChange}></input>그리고 여기서 선택하는 이미지가 상태관리 값에 담기게 됩니다.
그럼 이 담긴 이미지를 불러와 줘야합니다.선택하면 준비된(꾸며둔) div 미리보기로 봐줘야 하거든요.
<img
src={
file
? file
: "src를 기본이미지값 주소를 주었습니다."
}
alt=""
> onClick={modal}
/>img태그 속 src값으로 file에 담긴값을 참으로 삼항연사자로 기본이미지 or 선택된 이미지가 보이도록 설정해놨습니다. 이렇게 미니프리뷰까지 구현이 되었습니다.
🛩 모달창 사진 프리뷰 구현
그럼 이 작은 (프사로 쓸 예정이 였습니다) 사진을 조금 더 크게 한번 눌러서 보고 싶은 욕구를
충족 시키기 위해 모달창 팝업으로 사진을 보여주기로 생각했습니다.
위에 img태그 속 onClick에 프롭받은 modal을 활용하여 모달창이 오픈 되는 것 까지 구현했습니다.
그럼 이제 저 이미지를 따와야겠죠? 모달창은 아직 하얀 도화지 처럼 아무것도 불러오지 못합니다.(당연히)
const click = (event: { currentTarget: any }) => {
let clickEmg = event.currentTarget;
setisEmage(clickEmg);
};그리하여 만들어진게 바로 이 클릭 함수 입니다.
내가 이미지를 확대하여 보고싶다면 이미지를 클릭하겠죠? 그럼 이미지를 클릭했을때 값을 받아오면 됩니다.
그 이미지 값을 상태관리에 담아줍니다.
setisEmage의 src엔 이제 저 이미지의 주소가 담겨있습니다.
그럼 모달창 값에 저 이미지 주소를 넣어주기만 하면 됩니다.
const toggle = (event: any) => {
setisOpen(!isOpen);
click(event);
};
-------------------------------
<ImgUpload modal={toggle} />이미 모달창을 열기위한 토글 함수를 넣어뒀기 때문에 저 토글 함수안에 클릭함수를 실행시켜 주기만하면 모달창도 열리면서 이미지의 주소값을 상태값에 담아주는것이 되겠죠..
이렇게 하면 모달로 프리뷰 까지 확인이 가능합니다.
🛩 삭제구현
삭제는 고민한 시간에 비해 금방 구현이 됐습니다..
시간 탓인진 몰라도 멍하게 10분정도 생각했던 거 같습니다....(사실 어떻게 구현해야 할지 잘 몰랐기도 하구요ㅠㅠ)
그냥 단순히 업로드도 htmlFor로 연결시켜줬으니 삭제도 그렇게 해줄까나 하고
const ImageRemove = (): void => {
setFile(src를 기본이미지값 주소를 주었습니다.);
// 렌더링 이미지 기본값으로 변경
};
---- 이미지 삭제 ?라기보단 클릭하면 기본 이미지를 상태관리 값에 넣어 놓는 함수로 구현했습니다.
return (
<div>
<input id="profileImg" type="file" onChange={handleChange}></input>
<input id="delteImg" onClick={ImageRemove}></input>위의 코드 처럼 똑같이 id값을 맞춰주고 라벨을 클릭하면 함수가 실행되도록 했는데
코드가 정상적으로 잘 작동했습니다. 이리하여 삭제도 구현
완성화면
