const asyncUpFetch = createAsyncThunk('counterSlice/asyncUpFetch', async () => {
const resp = await fetch('https://api.aergo.io/~~')
const data = await resp.json()
return data.value
})
<Button variant="contained" component="label">
아이콘 업로드
<input
accept="image/*"
multiple
type="file"
hidden
onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUploadIcon(e)}
/>
</Button>
먼저, 업로드 버튼을 만들고, 모든이미지를 허용하고, file타입으로 input태그를 만든다.
const handleUploadIcon = (e: ChangeEvent<HTMLInputElement>) => {
setImgFile(e.target.files[0])
const imagePromise = e.target.files[0].arrayBuffer().then((buf) => {
return makeImage(buf, figure, borderColor)
})
imagePromise.then((resized) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(resized)
fileReader.onload = (e) => {
const image = new Image()
image.src = e.target.result as string
image.onload = () => {
const base64Img = e.target.result as string
// //! 아이콘 해쉬 변환
const hash = CryptoJS.SHA256(base64Img).toString()
const file = dataURLtoFile(base64Img, 'MaskedImage.png')
dispatch(setInfo(base64Img, 'base64Img'))
dispatch(setInfo(hash, '아이콘 추가'))
setFile(file)
}
}
})
}
makeImage함수로 이미지를 masking 그리고, dataURLtoFile 함수로 파일객체로 만들어준다.
useEffect(() => {
if (imgFile) {
const imagePromise = imgFile.arrayBuffer().then((buf: ArrayBuffer) => {
return makeImage(buf, figure, borderColor)
})
imagePromise.then((resized: Blob) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(resized)
fileReader.onload = (e) => {
const image = new Image()
image.src = e.target.result as string
image.onload = () => {
const base64Img = e.target.result as string
const hash = CryptoJS.SHA256(base64Img).toString()
const file = dataURLtoFile(base64Img, 'MaskedImage.png')
dispatch(setInfo(base64Img, 'base64Img'))
dispatch(setInfo(hash, '아이콘 추가'))
setFile(file)
}
}
})
}
}, [borderImgState, borderColor])
useEffect(() => {
if (icon && file) {
dispatch(setInfo(file, 'uploadFile'))
dispatch(setInfo(borderImg, 'borderImgState'))
dispatch(setInfo(borderColor, 'borderColor'))
}
}, [icon, file])
border가 바뀔때마다, 그리고 img가 바뀔때마다, masking 함수를 실행한다.
지금껏 프로젝트를 하면서, 리덕스를 사용하여 상태관리를 해왔다.
상태관리 라이브러리는 정말 많다. 최근에 들어본 상태관리 라이브러리는 Mobx , Recoil, Zustand 등등..
다른 상태관리를 직접 프로젝트에서 적용해보진 않았지만, 통계적으로 압도적이다.
지금까지 리액트와 리덕스를 사용하면서 큰 불편함을 느낀적은 없었다.
하지만, 리덕스의 타입정의, 액션함수, 리듀서를 왔다갔다 하며 변경해줘야하는 번거로움이 있었다.