[TIL] 경고와 버전 이슈

[TIL] 경고와 버전 이슈

날짜

• 2022.06.14.

목표

• OpenSea 클론코딩 - Create 페이지 구현

내용

함수 컴포넌트 내부 Styled-Components 경고 해결

• 함수 컴포넌트 내부에 Styled-Components를 선언하면 다음과 같은 경고 발생

    const CreateWrapper = ({ children }) => {
      const Wapper = styled.div`
  
      `;
      return (
        <Wapper>
          {children}
        </Wapper>
      );
    }

    react_devtools_backend.js:4026 The component styled.div with the id of "sc-jqUVSM" has been created dynamically.
    You may see this warning because you've called styled inside another component.
    To resolve this only create new StyledComponents outside of any render method and function component.

• 해결방법 - 단순히 함수 컴포넌트 외부에 선언 및 정의

    const Wapper = styled.div`
  
    `;
    const CreateWrapper = ({ children }) => {
      return (
        <Wapper>
          {children}
        </Wapper>
      );
    }

• 함수 내부의 변수를 사용하고 싶은 경우 props 사용

    const Wapper = styled.div`
      width: ${props => props.width};
    `;
    const CreateWrapper = ({ children, width="100px" }) => {
      return (
        <Wapper width={width}>
          {children}
        </Wapper>
      );
    }

Image Upload Preview

import styled from 'styled-components';
import { useRef, useState } from 'react';

const UploadInput = styled.input`
  display: none;
`;

const UploadImage = styled.div`
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
  ${(props) => props.imageUrl === '' ? undefined : `background-image: url(${props.imageUrl});`
  }
  background-size: contain;
  background-repeat: no-repeat;
`;

const fileToDataURL = (file) => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = (event) => {
    resolve(event.target.result)
  };
  reader.readAsDataURL(file);
  })

const App = ({ onChange = (e) => { console.log(e.target) } }) => {
  const uploadRef = useRef(null);
  const [dataURL, setDataURL] = useState('')

  const test = (e) => {
    const file = e.target.files[0];

    if(!file) {
      setDataURL('');
      return;
    }

    fileToDataURL(file)
      .then(dataUri => {
        setDataURL(dataUri)
      })

  }

  return (
    <>
      <UploadImage imageUrl={dataURL} onClick={() => { uploadRef.current.click() }}></UploadImage>
      <UploadInput ref={uploadRef} type={'file'} onChange={test}></UploadInput>
    </>
  );
}

export default App;

• 참조 사이트

caver-js 버전 오류

• 문제 - caver-js 최신 버전에 대한 오류 발생
• 해결 - 1.5.0으로 버전 다운그레이드

결론

• preview 기능을 모듈을 사용해서 금방 구현 가능하지만, 직접 구현해봄
  • 생각보다 어려웠음
• caver-js 버전 이슈로 인해 몇시간을 날렸는지 모르겠다.
  • 그래도 해결!?