TypeScript, Next.js, React.js 이미지 미리보기 | Image Preview

프론트엔드라면 프로젝트마다 적어도 한번씩은 image preview 작업을 할 것이다. 그래서 필수 코드를 정리해보았다.

 

아래 코드는 프로필 이미지를 편집하는 모달이다.

스택은 macro.twin, next.js(pages router)이고 css가 생략되어 있을 수 있다. 

TypeScript 에러

 

 

위의 빨간 줄을 없애기 위해 아래처럼 방어코드를 작성해주었다. 

const [imagePreview, setImagePreview] = useState("/images/defaultUser.svg");
	const addPreviewImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
		if (e.target.files !== null) {
			const file = e.target.files[0];
			if (file) {
				const reader = new FileReader();
				reader.readAsDataURL(file);
				await new Promise((resolve) => {
					reader.onload = () => {
						setImagePreview(reader.result as string);
						resolve(null);
					};
				});
			}
		}
	};
    
    return (
    	<h1>Profile information</h1>
				<div>
					<div tw="w-full text-left mb-2">Photo</div>
					<div tw="w-full flex gap-5 justify-center items-center">
						<div tw="relative w-[80px] h-[80px] border border-[#70686880] rounded-full overflow-hidden">
							<input
								style={{ display: "none" }}
								id="imageInput"
								name="image"
								type="file"
								accept=".png, .jpeg, .jpg"
								onChange={(e) => addPreviewImage(e)}
							/>
							<Image
								priority
								src={imagePreview}
								alt="profile_image"
								fill
								sizes="70px"
							/>
						</div>
						<div tw="flex flex-col text-left">
							<div tw="flex gap-4">
								<button tw="text-mint">
									<label htmlFor="imageInput">Update</label>
								</button>
								<button tw="text-red-600">Remove</button>
							</div>
							<p>
								Recommended: Squre JPG, PNG, at least 1,000
								pixels <br /> per side.
							</p>
						</div>
					</div>
				</div>
    )