<input type="file" />
을 통해 이미지가 첨부되는 것을 확인할 수 있음<input ref={inputRef} />
import React, { useRef, useState } from 'react';
import './App.css';
import ImageBox from './components/ImageBox';
function App() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<div className="container">
<div className="initial--box">
<input type="file" ref={inputRef} />
<div
className="plus--box"
onClick={()=>{
inputRef.current?.click()
}}
>
+
</div>
</div>
{/* <ImageBox src="hello" />
<ImageBox src="hello" />
<ImageBox src="hello" />
<ImageBox src="hello" /> */}
</div>
);
}
export default App;
참고
function App() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<div className="container">
<div className="initial--box">
<input type="file" ref={inputRef}
onChange={(event)=>{
console.log("hello")
console.log(event.currentTarget.value)
}}
/>
</div>
</div>
);
}
function App() {
const inputRef = useRef<HTMLInputElement>(null);
const [imageList, setImageList] = useState<string[]>([]);
console.log(imageList)
return (
<div className="container">
<div className="initial--box">
<input type="file" ref={inputRef}
onChange={(event)=>{
// console.log("hello")
// console.log(event.currentTarget.value)
if(event.currentTarget.value){
const v = event.currentTarget.value;
setImageList(prev => [...prev, v])
}
}}
/>
<div
className="plus--box"
onClick={()=>{
inputRef.current?.click()
}}
>
+
</div>
</div>
</div>
);
}
function App() {
const inputRef = useRef<HTMLInputElement>(null);
const [imageList, setImageList] = useState<string[]>([]);
console.log(imageList)
return (
<div className="container">
<div className="initial--box">
<div className={imageList.length === 0 ? '' : 'text--center'}>
이미지가 없습니다.<br />이미지를 추가해주세요.
</div>
<input type="file" ref={inputRef}
onChange={(event)=>{
if(event.currentTarget.value){
const v = event.currentTarget.value;
setImageList(prev => [...prev, v])
}
}}
/>
<div
className="plus--box"
onClick={()=>{
inputRef.current?.click()
}}
>
+
</div>
</div>
</div>
);
}
function App() {
const inputRef = useRef<HTMLInputElement>(null);
const [imageList, setImageList] = useState<string[]>([]);
console.log(imageList)
return (
<div className="container">
<div className="initial--box">
{ imageList.length === 0 &&
<div className="text--center">
이미지가 없습니다.<br />이미지를 추가해주세요.
</div>
}
<input type="file" ref={inputRef}
onChange={(event)=>{
if(event.currentTarget.value){
const v = event.currentTarget.value;
setImageList(prev => [...prev, v])
}
}}
/>
<div
className="plus--box"
onClick={()=>{
inputRef.current?.click()
}}
>
+
</div>
</div>
</div>
);
}
참고
{
imageList.map((el, idx)=>
<div key={el + idx} className="gallery--list">
<ImageBox src={el} alt="" />
</div>
)
}
<input type="file" ref={inputRef}
onChange={(event)=>{
if(event.currentTarget.files?.[0]){
const file = event.currentTarget.files[0];
console.log(file.name)
const reader = new FileReader();
reader.readAsDataURL(file)
reader.onloadend = (event) => {
setImageList(prev => [...prev, event.target?.result as string])
}
}
}}
/>
참고
일단 첨부는 잘 되는데, 그냥 기능만 붙일 걸...
(가이드를 바꿔서 row가 아닌 column 형태로 추가하는 커스텀은 다음 시간에... css 노가다…^^ > me)