[React] 이미지 클릭 시 파일 선택 <Input /> 사용하기

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

"이미지 클릭 하면 <Input /> Ref 이용해서 하는거다" 라는건 기억이 나는데 막상 하려니까 가물가물 하더라 ..

역시 사람의 기억은 믿을게 안되나 보다. 그래서 이렇게 기록을 남기기로 했다.

언제나처럼 코드를 분리하기 위해서 쪼개서 작성하는 걸 기본으로 한다.
배울 때 코드는 최대한 쪼개서 작성해야 한다고 배웠기 때문ㅇㅔ ...

// Modify.tsx
const fileInputRef = useRef<HTMLInputElement | null>(null);
<ContentImage
    src={articles.image}
    onClick={() => {
      fileInputRef.current?.click();
    }}
/>
<FileInput ref={fileInputRef} />

// StyledDetail.tsx
export const ContentImage = styled.img`
    width: 100%;
    height: 600px;
    object-fit: cover;
    margin-bottom: 0.4rem;
`;

대충 코드를 설명하자면, 수정 페이지에서 배경 이미지 같은걸 넣어주려고 하고있었다.

Styled-components 로 디자인을 하다 보니 해당코드처럼 디자인을 간단하게 작성해주었다.

fileInputRef 는 컴포넌트가 마운트 되면서 값이 생기기 때문에

HTMLInputElement | null 타입으로 지정해주고 초기값은 null 이다.

마운트 된 뒤에 클릭 하면 이미지를 클릭하면 Ref 를 이용해 <input /> 이 같이 눌릴 수 있도록 하면 끝난다.

// FileInput.tsx
import { FileInput as StyledFileInput } from "../styles/StyledWrite";

export const FileInput = forwardRef<HTMLInputElement>((props, ref) => {
	return <StyledFileInput ref={ref} type="file" accept="image/*" />;
});

// StyledWrite.tsx
export const FileInput = styled.input`
  cursor: pointer;
`;

이름이 같아서 as 를 이용해 이름을 변경해주고 ( 파일명을 변경하려다가 딱히 좋은 이름이 생각안나서 그냥 as 를 이용했다. )

forwordRef 로 지정해주고 ref 를 전달해준다. type 은 file accpt 를 image 로 지정해줘서 이미지만 선택할 수 있도록 한다.