[ Nomad coders ] (의식의 흐름으로 쓰는) twitter clone 타입스크립트로 다시 만들어보기 4

#3.4 ~ #4.0

 

#4.1 ~ #

 

 

💻

 

 

 

거의 firestore 내용

 

기본적으로 생성하는 form은 useForm을 써서 만들고 있고

firebase는... 강의 내용과 버전이 다르기 때문에 그냥 공식문서를 참고해서 사용하고 있다.

 

 

 

useForm에서 input img를 사용하려고 했다.

노마드코더 트위터 클론코딩에서는 useform을 사용하지 않고 img가 onChange될 때 자신이 올릴 이미지의 사진을 보여주는 식으로 구성이 되었다.

이 코드를 useform을 이용해서 짜려고 하니 몇 가지 문제가 나왔다.

 

1.

form 안에 input이 들어있어서 발생하는 문제.

form 안에 input이 들어있기 때문에 form에 걸어놓은 onSubmit함수에 이미지 경로를 넣게 되면 

이미지가 변경될 때(onChange)가 아닌 이미지가 업도르될 때 (onSubmit) 이미지의 사진이 화면에 보여진다.

 const [attachment, setAttachment] = useState<null | string>();


 const onSubmit = async ({ tweet, image }: any) => {
     await addDoc(collection(db, "tweets"), {
       tweet,
       createdAt: Date.now(),
       creatorId: userObj.uid,
     });
    setValue("tweet", "");
  };


<form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("tweet", { maxLength: 120 })}
          type="text"
          placeholder="What's on your mind?"
        />
        <input
          type="file"
          accept="image/*"
          {...register("image")}
        />
        <input type="submit" value="Tweet" />
        {attachment && (
          <div>
            <img src={attachment} width="50px" height="50px" alt="" />
            <button onClick={onClearPhoto}>Clear</button>
          </div>
        )}
      </form>

 

그래서 useForm에서 제공하는 함수 watch를 써서 img 안에 들어있는 내용물이 변할 때 그 값을 관찰하려고 했지만

그 것보다 훨씬 쉬운 방법이 있었다.

 

* 그냥 onChange를 쓰는 것

 

 

  const [attachment, setAttachment] = useState<null | string>();



const changeImg = (e: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { files },
    } = e;
    // fileReader API 사용

    if (files !== null) {
      const file = files[0];
      const reader = new FileReader();
      reader.onloadend = (finishedEvent) => {
        const targetResult: any = finishedEvent.target?.result;
        setAttachment(targetResult);
      };
      reader.readAsDataURL(file);
    }
  };
  
  
   return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("tweet", { maxLength: 120 })}
          type="text"
          placeholder="What's on your mind?"
        />
        <input
          type="file"
          accept="image/*"
          {...register("image")}
          onChange={changeImg}
        />
        <input type="submit" value="Tweet" />
        {attachment && (
          <div>
            <img src={attachment} width="50px" height="50px" alt="" />
            <button onClick={onClearPhoto}>Clear</button>
          </div>
        )}
      </form>
      <div>
        {tweets.map((tweet) => (
          <Tweet
            key={tweet.id}
            tweetObj={tweet}
            isOwner={tweet.creatorId === userObj.uid}
          />
        ))}
      </div>
    </div>
  );

 

이렇게.

참 쉽죠?