# 순수함수로 어떻게 만들까?

const ImageInput = ({ uploadImages, setUploadImages }) => {
   const hiddenFileInput = React.useRef(null);

   const onImageInputButtonClicked = () => {
     hiddenFileInput.current.click();
   };
   
   const onFileInputChanged = (event) => {
     const fileUploaded = event.target.files[0];
     const fileReader = new window.FileReader(); 
     
     fileReader.onloadend = (onLoadEndEvent) => {
       const imageUrl = onLoadEndEvent.target.result;
       const newFileObj = { fileUploaded, imageUrl };
       setUploadImages([...uploadImages, newFileObj]);
     };
     fileReader.readAsDataURL(fileUploaded);
   };
  //...
  
  return (
      <input
         type="file"
         accept="image/*"
         ref={hiddenFileInput}
         style={{ display: 'none' }}
         onChange={onFileInputChanged}
       />
  )

위와 같은 코드를 작성했다. 그런데 `onFileInputChanged` 함수는 순수함수가 아니라서 `uploadImages`가 외부에서 변경이 되면 side-effect가 생길 수도 있을 것 같다는 리뷰를 남겨주셨다. 그런데 `uploadImgaes`는 반드시 함수 내에서 사용해야하는 값이었다. 순수함수로 만들기 위해서 `uploadImgaes`를 매개변수로 전달을 해줘야 했다.

하지만 `onFileInputChanged`는 이벤트 핸들러에서 호출이 되는 것이기 때문에 직접 매개변수로 `uploadImgaes`를 전달해 줄 수 없었다. 따라서 완전히 모두 다 순수 함수로 만드는 것은 불가능했다.

onChange={(event) => onFileInputChanged(event, uploadImages)}

결국 위와 같이 순수함수가 아닌 부분이 있을 수 밖에 없었는데 최대한 그 범위를 축소하는데 의미가 있는 것 같다. [함수형 자바스크립트](https://book.naver.com/bookdb/book_detail.nhn?bid=13242075)의 1~2장 부분에 최대한 이 범위를 축소하는 방법이 나와있다고 한석님께서 말씀해주셔서 나중에 읽어보면 좋을 것 같다.

###### tags: `tech sharing`