리액트 함수 분리?

Question

안녕하세요 현재 리액트와 파이어베이스를 사용하여 포폴작업중에있는데

중복적으로 사용되는 코드가있어서 따로 js파일을 만들어 함수로만들어 사용하려는데
쉽게 작동이되질않아서 질문올립니다..ㅠㅠ

첫번째 사진에서 reader.onloadend = ()=>{ reader.result } 저 result값이 필요한데

return이로 빼내올 방법이 무엇일까요.. 현재는 reader를 리턴으로 빼내어 사용을하니 밖에서 result를 한번 더 해줘야해서 화면에 바로 나타나질않고 input에 무언가 입력했을 때 화면이 렌더되면 그때 이미지가 나타납니다..

그리고 두번째 코드는 파이어베이스의 이미지를 스토리지에 올리는 작업을 함수로 분리하려는중인데 이 또한 매끄럽게 완성이안되네요.. 코드는 이미지업로드가 성공적으로 완료했으면 url을 받아오는건데

이제 url은 잘 나타나는데 그 url을 여러곳에 사용을해야해서 저 url을 빼내 올 방법이나
또는 그 안에 다른 데이터베이스에 추가하는 문법을 넣어줘야하는데 그 문법을 인자로 받아올 수 있을까요?

1. 첫번째 사진은 result값을 빼오고싶습니다. onloadend 된 상태의
2. 두번째 사진은 url을 빼오거나 다른 데이터베이스 또는 auth의 유저정보에 업데이트하는 문법을 인자로 보낼 수 있을까요?

1번과2번 두 사진 모두 인자로는 이미지파일을 받고있습니다. 2번사진은 경로와 파일명도 받고있습니다.

제가 제대로 설명한게 맞는지 모르겠네요 ㅠㅠ

혹은 이러한 정보를 검색해볼만한 키워드가 있을까요?

김하림 · Answer

1, 2번 둘 다 콜백함수를 처리하는 로직을 Promise로 감싸서 처리해주면 됩니다.
```
const getPreviewPhoto = async (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    }
    reader.onerror = (error) => {
      reject(error);
    }
    reader.readAsDataURL(file);
  });
}
```
이렇게 Promise로 감싸주면 코드를 호출하는 곳에서 async/await로 파일을 받아올 수 있습니다.
에러 핸들링을 위해 onloadend 대신에 onload와 onerror를 사용했습니다. (onload와 onloadend의 차이는 onloadend는 성공/실패와 상관없이 호출되고, onload는 성공하는 경우에만 호출됩니다.)
```
const previewPhoto = await getPreviewPhoto(file);
```
만약 파일을 읽는 중에 에러 처리가 필요하다면 try/catch 로 감싸주는 작업이 필요합니다.

2번 질문도 동일합니다.
```
return new Promise((resolve, reject) => {
  storageUploading.on(
    state_changed,
    null,
    (error) => { reject(error); },
    () => {
      storageUploading.snapshot.ref.getDownloadURL()
        .then((url) => resolve(url))
        .catch((error) => reject(error));
    }
  )
});
```
콜백 지옥, Promise 등의 키워드로 검색하면 참고하실 수 있는 글이 엄청 많이 나옵니다. 조금 더 나아가 이벤트 루프까지 공부하시면 나중에 면접에도 도움이 되실거에요.