[SNS프로젝트] Input 널 너무 모르고 니 type도 모르고

✅ SNS 프로젝트의 프로필페이지에는 이미지를 불러오는 기능이 있다.
그 과정에서 Input에는 우리가 주로 쓰는 Input type=button 이외에도 수 많은 타입이 있다는걸 알게되었다. 그 부분에 대해 공부하고 정리해보려 한다.

✔ input : 입력 요소

HTML input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, input 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.
-mozilla-

✔ input 유형

input 요소는 type에 따라 완전히 달라진다. input 요소에 특성을 지정하지 않은 경우 기본값은 text로 설정된다.

✔ input 속성

Input이 강력한 요소라고 불리는 이유는 다양한 속성 때문이다.
나도 이번에 다중 이미지 선택을 위해 찾아보며 이렇게 많은 속성이 있다는 점에서 놀랐다.💨
일단 모든 Input 요소는 유형에 상관하지 않고, HTMLInputElement (en-US) 인터페이스에 기반하므로 기술적으로 모든 Input은 동일한 속성을 가집니다.
그러나 사실 대부분의 속성은 일부 유형에서만 효과를 보입니다. 게다가, 어떤 속성은 유형별로 그 영향이 달라집니다.

✅ input 유형과 속성을 사용하여 이미지불러오기 기능 구현하기

✔ 프로필 설정 🔹 저희팀은 React를 사용하여 프로젝트를 제작했습니다.

✔ UploadInput이라는 클릭시 파일을 찾는 부분으로 연결되는 클래스에 Input의 type="file" 유형과 accept=".png, .jpg, .jpeg" 속성을 부여하였고, onClick 이벤트를 추가하여 구현하였습니다.

✔ html

<Label htmlFor="file-sync" className="file-sync" onClick={handleImgClick}>
  <ImgUploadBtn>
    <Img src={imageUrl || image} alt="uploadFile" />
    <ImgIcon src={uploadIcon} alt="업로드아이콘" />
  </ImgUploadBtn>
</Label>
<UploadInput ref={uploadInputRef} id="profile" type="file" accept=".png, .jpg, .jpeg" hidden onChange={handleFile} />

✔ CSS (styled-component)

export const Label = styled.label`
  font-size: 1.2rem;
  color: var(--gray-color);
  margin-bottom: 1rem;
`;

export const ImgUploadBtn = styled.button`
  width: 11rem;
  height: 11rem;
  margin: 3rem 0;
  position: relative;
`;

export const Img = styled.img`
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  width: 11rem;
  cursor: pointer;
  position: relative;
  object-fit: cover;
`;

export const ImgIcon = styled.img`
  width: 5rem;
  position: absolute;
  bottom: 0%;
  right: 0%;
`;

✔ js

const handleImgClick = () => {
    uploadInputRef.current.click();
  };

//프로필 사진 업로드
const handleFile = async (event) => {
    const file = event.target.files[0];
    var reader = new FileReader();

    reader.onload = function (e) {
      reader.result && setImage(reader.result);
    };

    reader.readAsDataURL(event.target.files[0]);

    const profile = document.querySelector("#profile");
    const url = "api주소";

    const formData = new FormData();
    formData.append("image", file);
    try {
      const response = await fetch("api주소/image/uploadfile", {
        method: "POST",
        body: formData,
      });
      const data = await response.json();

      console.log(data);
      const path = url + data.filename;
      setImageUrl(path);
    } catch (error) {
      console.error(error);
    }
  };

✔ 결과물 (이름, id, 소개부분에 대한 폼은 이어지는 게시글을 참고해주세요)

📚 Reference

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/input