프로필 유효성 검사 & 미리보기 이미지

목표
1. 프로필 유효성 검사
2. 미리보기 이미지 표시

1. useForm - 리액트에서 제공하는 간편한 유효성 검사 기능

• 시작하기

npm install react-hook-form

import { useForm } from 'react-hook-form'

function Profile() {
    const { register, handleSubmit } = useForm({ mode: "onChange" }); 
    // onChange로 지정할 경우 실시간 검사가 가능함
    
    const onSubmit = (data) => {
    console.log(data);
    }; // 사용자가 입력한 값으로 유효성 검사 실시
    
 <form method='get' onSubmit={handleSubmit(onSubmit)}>

2. 유효성 검사 부분 작성

{...register("firstName", {
   pattern: {
   value: /^[a-zA-Z]+$/,
   message: "First name should only contain letters."
   },
   })}

자세한 설명 참고
https://www.notion.so/Sign-up-js-1702cfe07323808289f3dfff74175c8d

1. 파일 버튼 아이콘으로 변경 - useRef

import React, {useRef} from 'react'
function Profile() {
const fileInputRef = useRef(null);

const handleClick = () => {
        fileInputRef.current.click(); // 파일 업로드 input 클릭 트리거
      };
      
      <input type="file" name="profileImage" id="fi" 
             style={{"display" : "none"}}
             ref={fileInputRef} // 참조할 영역 지정
             />
             <div className='camera_icon'>
                  <img src={cameraIcon} alt="사진 불러오기" onClick={handleClick}/>
             </div>
             // 이미지 클릭 시 파일 선택 가능하게함

2. 파일 이미지 선택 시 미리보기 기능

accept="image/*" -> 모든 이미지 파일 사용 가능
업로드 할 수 있는 파일의 속성 지정
input type이 file인 경우에만 사용

URL.createObjectURL(file) - 파일 url 생성

const [preview, setPreview] = useState(null);
const handleFileChange = (event) => {
        const file = event.target.files[0]; // 첫 번째 파일만 가져오기
        if (file) {
        const imageUrl = URL.createObjectURL(file); // URL 생성
        setPreview(imageUrl); // 미리보기 상태 업데이트
        }
    };


<input type="file" name="profileImage" id="fi" 
    style={{"display" : "none"}}
    ref={fileInputRef}
 	onChange={handleFileChange}
    accept="image/*"
    />
    <div className='camera_icon'>
         <img src={cameraIcon} alt="사진 불러오기" onClick={handleClick}/>
    </div>
    
    <div>
    {preview && (
     <div
     className="image_preview"
     style={{
     backgroundImage: `url(${preview})`,
     backgroundSize: "cover",
     }}
     />
     )}
     </div>

왜 onClick이 아니라 onChange를 사용할까?
갑자기 문득 궁금해졌다 파일을 클릭하면 값이 바뀌는 로직인데 onClick이 더 적합하지 않나?

input type ="file"일 때 onChange를 사용하는 이유

onClick은 보통 사용자가 버튼을 클릭했을 때 발생하는 이벤트인데
input type="file" 요소에서는 파일이 선택되는 순간(파일이 실제로 선택되어 input의 값이 변경될 때) onChange 이벤트가 발생하기 때문에 변경된 값을 처리하기 위해 사용한다.
즉, 사용자가 파일을 선택하면, 해당 파일 정보가 input의 값으로 반영되며, 이 변경 사항을 감지하기 때문에 필요한 것!