[트위터 클론 코딩] #6. Preview Images

~4.1까지의 강의

 

firebase storage를 생성한다. 생성이라고 거창한 것은 없고, 그냥 클릭하면 됨

 

사진을 첨부해야 하니까 방법을 바꿔보도록 하자

 

Home.js

    const onChange = (event) => {
      const {
        target: { value },
      } = event;
      setNweet(value);
    };
    const onFileChange = (event) => {
      const {
        target: { files },
      } = event;
      const theFile = files[0];
      const reader = new FileReader();
      reader.onloadend = (finishedEvent) => {
        console.log(finishedEvent);
      };
      reader.readAsDataURL(theFile);
    };
    return (
      <div>
      	<input type="file" accept="image/*" onChange={onFileChange} />
          <input type="submit" value="Nweet" />
        </form>
      </div>
    );
  };
export default Home;

type이 file인 input을 추가한다. 어떤 종류라도 이미지이기만 한 것을 받을 것이다.

 

그런데, 이미지를 선택한 후 미리보기로 보여줬음 좋겠다. 

사진을 가져왔을 때 변화하도록 만들어야 한다. 즉, 변했을 때 읽어오도록 한다.

 

onFileChange를 만들어 주자.

event를 만들어, file에 넣어준다. 즉, 파일이 생성되면 event가 생겨 많은 도구들을 볼 수 있다.

reader를 가지고 readAsDataURL을 쓴다. 무엇을 읽어올 것이라면 file을 읽어온다.

파일을 가지고 reader를 만든다면 URL을 사용해서 파일을 읽어야 한다.

reader를 이벤트 리스너에 추가해서 어떻게 생겼는지 확인을 한다.

url에서 파일을 읽는 것이다.

사진을 선택하면, 독특한 텍스트로 변환해주는 것이다.

브라우저는 텍스트를 이미지로 변환하는 방법을 안다.

 

---

우리는 input에 이벤트 리스너를 추가했고, 그 이벤트로부터 파일을 받는다.

 

Home.js

import React,{useState, useEffect } from "react";
import { dbService } from "fbase";
import Nweet from "components/Nweet";


const Home = ({ userObj }) => {
    const [nweet, setNweet] = useState("");
    const [nweets, setNweets] = useState([]);
    const [attachment, setAttachment] = useState();
  useEffect(() => {    dbService.collection("nweets").onSnapshot((snapshot) => {
      const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setNweets(nweetArray);
    });
  }, []);
    const onSubmit = async (event) => {
      event.preventDefault();
      await dbService.collection("nweets").add({
        text: nweet,
        createdAt: Date.now(),
        creatorId: userObj.uid,
      });
      setNweet("");
    };
    const onChange = (event) => {
      const {
        target: { value },
      } = event;
      setNweet(value);
    };
    const onFileChange = (event) => {
      const {
        target: { files },
      } = event;
      const theFile = files[0];
      const reader = new FileReader();
      reader.onloadend = (finishedEvent) => {
        const {
          currentTarget: { result },
        } = finishedEvent;
        setAttachment(result);
      };
      reader.readAsDataURL(theFile);
    };
    const onClearAttachment = () => setAttachment(null);
    return (
      <div>
        <form onSubmit={onSubmit}>
          <input
            value={nweet}
            onChange={onChange}
            type="text"
            placeholder="What's on your mind?"
            maxLength={120}
          />
          <input type="file" accept="image/*" onChange={onFileChange} />
          <input type="submit" value="Nweet" />
          {attachment && (
          <div>
            <img src={attachment} width="50px" height="50px" />
            <button onClick={onClearAttachment}>Clear</button>
          </div>
        )}
        </form>
        <div>
          {nweets.map((nweet) => (
            <Nweet
              key={nweet.id}
              nweetObj={nweet}
              isOwner={nweet.creatorId === userObj.uid}
            />
          ))}
      </div>
      </div>
    );
  };
export default Home;

파일 로딩이 끝날 때 또는 읽는 것이 끝나며나 finishedEvent한 후, url을 읽어 데이터를 얻게 된다.

우리가 가진 텍스트, 즉, url을 state에 넣어야 하는데 그것을 attachment라고 하자.

읽고 난 후 setAttachment에 넣어준다.