[React] 미니 트위터 클론코딩(CRUD)

👀 현재까지 구현한 내용 영상

 

 

 

부트캠프 수업에서 리액트의 state와 props를 공부하게 되면서 해당 내용들을 사용하는 과제를 구현하게 되었다. 

나는 과제를 혼자서 처음부터 끝까지 만들어보면서 공부한 것을 더 익히고 싶었고 해보고싶은 추가 기능들을 덧붙여서 구현해보기로 했다. 구현하기로 목표한 내용은 다음과 같다. 

 

 

 

📚 목표

• 사이드바의 각 버튼을 클릭하면 해당하는 페이지로 이동하게 라우터 구현하기
• 트윗 목록이 보이는 페이지(Tweets.js)에서 더미데이터의 내용이 알맞게 보이게 하고 입력폼 만들기
• 사용자 페이지(MyPage.js)에는 (로그인했다고 가정하는)유저의 프로필이 보이게 하고, 더미데이터에서 해당 유저의 트윗만 보이게 하기
• Tweets.js에서 입력폼에 내용 입력후 전송하면 목록에 트윗이 추가되고 트윗은 최신순으로 나타나게 하기 
• 트윗 삭제 기능 추가하기
• 트윗의 본문을 클릭하면 수정되는(click-to-edit UI) 방식으로 트윗 수정 구현하기
• 새로고침되어도 계속 볼수있게 로컬 스토리지 구현하기

 

 

 

📁 폴더 구조

├── /twittler-self
│   ├── README.md
│   ├── /public                        
│   └── /src                           # React 컴포넌트가 들어가는 폴더
│        ├── static                    # dummyData가 들어가는 폴더
│        │    └── dummyData.js
│        ├── Pages                     # 페이지를 표시하는 컴포넌트가 들어가는 폴더
│        │    ├── About.js
│        │    ├── Mypage.js
│        │    └── Tweets.js
│        ├── Components                # 단일 컴포넌트가 들어가는 폴더
│        │    └── Tweet.js
│        ├── App.css
│        ├── App.js
│        ├── Footer.js
│        ├── index.js
│        └── Sidebar.js
├  package.json
└ .gitignore

 

 

 

🧱 페이지 레이아웃 

전체적인 레이아웃은 이렇게 와이어 프레임을 짜보았다. 

왼쪽에는 사이트바와 각 페이지로 이동할 버튼들이 들어가고

오른쪽에는 프로필 영역/트윗입력폼이 될 상단 부분과 트윗 리스트가 출력될 하단부분으로 구성했다. 

각각의 트윗은 이미지와 정보, 텍스트 영역으로 구성되고 트윗 입력폼의 경우 전송버튼과 로컬스토리지 삭제버튼을 추가하기로 했다. 

 

 

 

 

💾 더미 데이터 

{
    id: 2,
    username: "harry00700",
    picture: `https://randomuser.me/api/portraits/women/50.jpg`,
    content:
      "Proin leo odio, porttitor id, .....",
    createdAt: "2022-02-25T16:17:47.000Z",
    updatedAt: "2022-02-25T16:17:47.000Z",
  },

더미 데이터는 과제와 비슷한 형태로 작성했고, 들어가는 내용은 변경해주었다. 

더미 데이터는 https://www.mockaroo.com/ < 이 사이트를 이용해서 만들었다. 생각보다 사용하기 쉬웠다. 

 

 

 

 

 

📝 구현한 코드

1. 라우터 구현

Tweets / About / Mypage

 

src/App.js

import { Routes, Route } from "react-router-dom";
import "./App.css";
import Sidebar from "./Sidebar";
import Tweets from "./Pages/Tweets";
import About from "./Pages/About";
import MyPage from "./Pages/MyPage";

function App() {
  return (
    <div className="App">
      <Sidebar />
      <section className="features">
        <Routes>
          <Route path="/" element={<Tweets />} />
          <Route path="/about" element={<About />} />
          <Route path="/mypage" element={<MyPage />} />
        </Routes>
      </section>
    </div>
  );
}

export default App;

 

 

라우팅되는 주소에 따라 features 컴포넌트 내부에 각각 다른 페이지 컴포넌트를 보여주기로 했다. 

트윗들을 보여주는 컴포넌트인 <Tweets>가 메인 컴포넌트이다. 

 

 

src/Sidebar.js

import { Link } from "react-router-dom";
const Sidebar = () => {
  return (
    <section className="Sidebar">
      <Link to="/">
        <div>tweets</div>
      </Link>
      <Link to="/about">
        <div>about</div>
      </Link>
      <Link to="/mypage">
        <div>mypage</div>
      </Link>
    </section>
  );
};

export default Sidebar;

 

 

<Sidebar> 컴포넌트에서 Link 컴포넌트를 사용해 각 div를 클릭하면 to 속성을 통해 Route 컴포넌트에 설정한 path 주소와 연결해주었다. 

Link 컴포넌트는 렌더링될때 a 요소로 변경되기때문에 button 요소를 사용하는 것보다 div가 나을것같아서 저렇게 코드를 작성했는데, 생각해보니 웹표준에 위배될수도 있다는 생각이 든다. 

 

=> 괜찮다! HTML5에서는 a태그가 div요소를 감싸도록 허용하기 때문에 웹접근성에 위배되지 않는다. 단 이것은 a태그만 가능해진것이고 기타 인라인 요소들의 내부에는 블럭요소를 넣을 수 없다. 

 

Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain 
flow content.

http://w3c.github.io/html-reference/a.html#a-changes

a – hyperlink (CHANGED) - HTML5

 

 

 

2. Tweets 컴포넌트에 더미데이터 트윗 출력하기

💻 구현 화면

 

 

<Tweets> 컴포넌트에서 더미데이터를 가져와 map 메서드를 사용해 모든 트윗을 렌더링하게 할것이다. 

이 구조를 생각하면서 먼저 src/Components/Tweet.js 파일에 각각의 개별 트윗이 될 <Tweet> 컴포넌트를 작성한다. 

 

 

src/Components/Tweet.js

const Tweet = ({ tweet }) => {
  const parseDate = (createdAt) =>
    new Date(createdAt).toLocaleDateString("ko-KR");

  return (
    <li>
      <div className="tweet-avatar">
        <img src={tweet.picture} />
      </div>
      <div className="tweet-content">
        <div className="tweet-info">
          <span className="tweet-username">{tweet.username}</span>
          <span className="tweet-date">{parseDate(tweet.createdAt)}</span>
          <button>delete</button>
        </div>
        <div className="tweet-msg">
          {tweet.content}
        </div>
      </div>
    </li>
  );
};

export default Tweet;

 

 

 

src/Pages/Tweets.js

import { useState } from "react";
import Tweet from "../Components/Tweet";
import dummyTweets from "../static/dummyData";

const Tweets = () => {
  const [tweetList, setTweetList] = useState(dummyTweets);

  return (
    <div className="tweets">
      <div className="tweet-form">
        <div className="tweet-avatar">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" />
        </div>
        <div className="tweet-input-wrapper">
          <div>
            <input type="text" value="harry00700" />
            <textarea></textarea>
          </div>
          <div className="tweet-buttons">
            <button type="button">
              send
            </button>
          </div>
        </div>
      </div>
      <ul className="tweet-list">
        {tweetList.map((tweet) => {
          return (
            <Tweet
              tweet={tweet}
              key={tweet.id}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default Tweets;

 

 

useState를 사용해 tweetList라는 state를 만들고 초기값을 static/dummyData.js의 dummyTweets로 넣어준다. 

그리고 .tweet-list내부에 map 메서드를 사용해 <Tweet> 컴포넌트를 반복적으로 렌더링 되게 한다. 

map 메서드를 사용할때는 각각의 요소에 고유한 key가 필요하기 때문에 tweet의 id를 key로 설정했다. 

여기에서 props로 넘겨준 tweet이 <Tweet> 컴포넌트에서 구조분해할당으로 꺼내져 각각의 트윗 컴포넌트에 값이 들어가게 된다. 

 

 

3. 트윗 작성하기

💻 구현 화면

 

 

트윗 작성을 구현할때 생각한것은 이것이었다. 

• send 버튼이 클릭될때 작성한 트윗이 데이터에 추가되게 하기
• 추가된 트윗은 위에서부터 즉, 최신순으로 나타나게 하기
• 작성한 내용이 없는데 send 버튼이 눌러졌을경우 경고창을 띄우고 트윗이 입력되지 않게 하기

 

 

다음 id를 지정하기 위해 useRef 훅을 사용했다. 

useRef는 특정 DOM을 직접 선택하거나 어떠한 변수를 담아두려고 할때 사용한다. 

이번에는 다음 트윗의 id를 변수로 담아두기 위해 사용했다. 

 

구현한 코드는 아래와 같다. 

 

import { useState, useRef } from "react";
import Tweet from "../Components/Tweet";
import dummyTweets from "../static/dummyData";

const Tweets = () => {
  const [tweetList, setTweetList] = useState(dummyTweets); // 전체 트윗 리스트
  const [user, setUser] = useState("harry00700"); // 유저 이름 input의 state
  const [msg, setMsg] = useState(""); // 트윗 입력 textarea의 state
  const nextId = useRef(6); // 다음 id 지정

  const handleUser = (event) => {
    setUser(event.target.value);
  };

  const handleMsg = (event) => {
    setMsg(event.target.value);
  };

  const addTweet = () => {
    if (msg === "") { // tweet 내용이 비어있다면
      alert("트윗 내용을 적어주세요.");
    } else {
      const tweet = {
        id: nextId.current,
        username: user,
        picture: `https://randomuser.me/api/portraits/women/50.jpg`,
        content: msg,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };
      // tweetList의 맨 앞에 새로 작성한 트윗 추가하고 input들의 값 초기화 + 다음 id설정
      setTweetList([tweet, ...tweetList]);
      setUser("harry00700");
      setMsg("");
      nextId.current += 1;
    }
  };

  return (
    <div className="tweets">
      <div className="tweet-form">
        <div className="tweet-avatar">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" />
        </div>
        <div className="tweet-input-wrapper">
          <div>
            <input type="text" value={user} onChange={handleUser} />
            <textarea value={msg} onChange={handleMsg}></textarea>
          </div>
          <div className="tweet-buttons">
            <button type="button" onClick={addTweet}>
              send
            </button>
          </div>
        </div>
      </div>
      <ul className="tweet-list">
        {tweetList.map((tweet) => {
          return (
            <Tweet
              tweet={tweet}
              key={tweet.id}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default Tweets;

 

 

 

 

4. 트윗 삭제하기

각각의 트윗들에는 delete 버튼이 있다. 이 버튼이 클릭되었을때 해당 트윗이 삭제되는 이벤트를 state 끌어올리기를 사용해 구현했다. 

트윗 삭제버튼은 하위 컴포넌트인 Tweet.js에 있지만 트윗 리스트의 state는 상위 컴포넌트인 Tweets.js에 있기때문에 이렇게 구현하였다. 삭제 이벤트를 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 내려주고 하위컴포넌트에서 이벤트를 호출하며 필요한 인자를 넘겨준다. 

 

 

 

Tweet.js

const Tweet = ({ tweet, deleteTweet }) => {
  const parseDate = (createdAt) =>
    new Date(createdAt).toLocaleDateString("ko-KR");

  return (
    <li>
      <div className="tweet-avatar">
        <img src={tweet.picture} />
      </div>
      <div className="tweet-content">
        <div className="tweet-info">
          <span className="tweet-username">{tweet.username}</span>
          <span className="tweet-date">{parseDate(tweet.createdAt)}</span>
          // 버튼이 클릭되면 deleteTweet 이벤트 실행 + 클릭된 트윗의 id를 인자로 넘겨줌
          <button onClick={() => deleteTweet(tweet.id)}>delete</button>
        </div>
        <div className="tweet-msg">
          {tweet.content}
        </div>
      </div>
    </li>
  );
};

export default Tweet;

 

 

 

Tweets.js

const deleteTweet = (id) => {
	// tweet id가 인자로 넘겨진 id와 일치하지 않는 트윗만 필터링
    // = 인자로 넘겨진 id의 트윗만 제외하고 상태를 변경함 = 트윗 삭제
    const deleteList = tweetList.filter((tweet) => tweet.id !== id);
    setTweetList(deleteList);
  };

 

 

 

 

 

5. 트윗 수정하기

💻 구현 화면

수정하려는 트윗의 본문 클릭시

트윗 수정후

트윗의 본문을 클릭하면 textarea와 수정버튼이 나타나고, 내용을 수정한 후 edit 버튼을 클릭하면 트윗 내용이 수정되게 구현했다. 

트윗의 수정상태를 나타내기 위해서 isEdit state를 생성하고, 수정된 트윗의 상태를 저장하기 위해 updateMsg state를 생성했다. 

트윗의 본문을 클릭하면 onEdit 이벤트가 실행되며 수정상태가 true로 변하고 트윗의 내용이 입력되어있는 textarea가 나타난다. 

수정 후 edit 버튼을 클릭하면 해당 트윗의 id와 수정된 트윗의 텍스트가 인자로 전달되고 상위 컴포넌트 Tweets.js에서 전달된 updateTweet이 실행된다.

 

 

 

Tweet.js

import { useState, useRef } from "react";

const Tweet = ({ tweet, deleteTweet, updateTweet }) => {
  const parseDate = (createdAt) =>
    new Date(createdAt).toLocaleDateString("ko-KR");
  const [isEdit, setIsEdit] = useState(false); // 트윗 수정상태
  const [updateMsg, setUpdateMsg] = useState(tweet.content); // 트윗 수정 textarea
  const textareaRef = useRef();

  const onEdit = () => {
    setIsEdit(true);
  };
  const handleUpdateMsg = (event) => {
    setUpdateMsg(event.target.value);
    textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
  };
  const onUpdate = (id, content) => {
    setIsEdit(false);
    updateTweet(id, content);
  };
  return (
    <li>
      <div className="tweet-avatar">
        <img src={tweet.picture} />
      </div>
      <div className="tweet-content">
        <div className="tweet-info">
          <span className="tweet-username">{tweet.username}</span>
          <span className="tweet-date">{parseDate(tweet.createdAt)}</span>
          <button onClick={() => deleteTweet(tweet.id)}>delete</button>
        </div>
        {isEdit ? (
          <>
            <textarea
              className="tweet-msg-edit"
              rows="7"
              value={updateMsg}
              ref={textareaRef}
              onChange={handleUpdateMsg}
            ></textarea>
            <button onClick={() => onUpdate(tweet.id, updateMsg)}>edit</button>
          </>
        ) : (
          <div className="tweet-msg" onClick={onEdit}>
            {tweet.content}
          </div>
        )}
      </div>
    </li>
  );
};

export default Tweet;

 

 

 

Tweets.js

const updateTweet = (id, content) => {
    const updateList = tweetList.map((tweet) =>
      tweet.id === id
      // 인자로 넘겨진 id와 같은 id를 가진 트윗의 내용을 수정
      // 다른 내용은 그대로 두고 (...tweet)
      // content와 updatedAt만 수정
        ? { ...tweet, content, updatedAt: new Date().toISOString() }
        : tweet
    );
    setTweetList(updateList);
  };

 

 

 

 

6. 로컬 스토리지 사용

새로고침해도 트윗이 계속 저장되어있게 하기 위해 로컬스토리지를 사용했다. 

맨 처음 저장된 로컬스토리지의 트윗을 불러오기 위해 useEffect 훅을 사용했다. 

빈 배열을 넣어 처음 컴포넌트가 실행될때 한번만 Effect가 실행되게 했다. 

로컬스토리지에 저장된 트윗이 있으면 해당 데이터를 tweetList로 세팅하고, nextId를 저장된 트윗들의 첫번째 트윗보다 1증가하도록 작성했다. 

저장된 트윗이 없을 경우 더미데이터를 사용하게 하고 nextId를 6으로 설정해주었다.(더미데이터의 데이터가 다섯개임으로)

 

Tweets.js

import { useState, useRef, useEffect } from "react";
import Tweet from "../Components/Tweet";
import dummyTweets from "../static/dummyData";

const Tweets = () => {
  const [tweetList, setTweetList] = useState([]);
  const [user, setUser] = useState("harry00700");
  const [msg, setMsg] = useState("");
  const nextId = useRef(6);

  const getTweetList = JSON.parse(localStorage.getItem("tweetAdded"));
  useEffect(() => {
    if (getTweetList !== null) {
      setTweetList(getTweetList);
      nextId.current = getTweetList[0].id + 1;
    } else {
      setTweetList(dummyTweets);
      nextId.current = 6;
    }
  }, []);

  const handleUser = (event) => {
    setUser(event.target.value);
  };

  const handleMsg = (event) => {
    setMsg(event.target.value);
  };

  const addTweet = () => {
    if (msg === "") {
      alert("트윗 내용을 적어주세요.");
    } else {
      const tweet = {
        id: nextId.current,
        username: user,
        picture: `https://randomuser.me/api/portraits/women/50.jpg`,
        content: msg,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };
      setTweetList([tweet, ...tweetList]);
      setUser("harry00700");
      setMsg("");
      nextId.current += 1;
      localStorage.setItem("tweetAdded", JSON.stringify([tweet, ...tweetList]));
    }
  };

  const deleteTweet = (id) => {
    const deleteList = tweetList.filter((tweet) => tweet.id !== id);
    setTweetList(deleteList);
    localStorage.setItem("tweetAdded", JSON.stringify(deleteList));
  };

  const updateTweet = (id, content) => {
    const updateList = tweetList.map((tweet) =>
      tweet.id === id
        ? { ...tweet, content, updatedAt: new Date().toISOString() }
        : tweet
    );
    setTweetList(updateList);
    localStorage.setItem("tweetAdded", JSON.stringify(updateList));
  };

  return (
    <div className="tweets">
      <div className="tweet-form">
        <div className="tweet-avatar">
          <img src="https://randomuser.me/api/portraits/women/50.jpg" />
        </div>
        <div className="tweet-input-wrapper">
          <div>
            <input type="text" value={user} onChange={handleUser} />
            <textarea value={msg} onChange={handleMsg}></textarea>
          </div>
          <div className="tweet-buttons">
            <button type="button" onClick={addTweet}>
              send
            </button>
            <button onClick={() => localStorage.clear("tweetAdded")}>
              localstorage clear
            </button>
          </div>
        </div>
      </div>
      <ul className="tweet-list">
        {tweetList.map((tweet) => {
          return (
            <Tweet
              tweet={tweet}
              key={tweet.id}
              deleteTweet={deleteTweet}
              updateTweet={updateTweet}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default Tweets;

 

 

 

 

💬 더 구현하고 싶거나 아쉬운 부분

트윗을 수정할때 현재 작성된 트윗의 크기만큼 textarea의 크기를 지정해주고싶은데 그게 안된다...

useRef를 사용해서 p의 높이를 가져와 textarea의 크기를 지정해주려고 했지만 코드를 바로 넣으니 textarea가 현재 렌더링이 되어있지 않아서 계속 오류가 발생하는것 같다. 

조금 더 방법을 찾아보려고 한다. 

 

 

 

📝 토이 프로젝트를 통해 배운점

• 상태가 변경되는 데이터는 useState를 사용하기
• useRef를 통해 특정 DOM을 선택하거나 변수를 지정할수있음
• useEffect를 사용해 컴포넌트가 처음 렌더링될때 데이터를 불러오게 할 수 있음 
• state 끌어올리기를 통해 하위 컴포넌트의 이벤트로 상위 컴포넌트의 데이터를 변경시킬수있음 
• 리액트에서 배열의 데이터를 등록 / 수정 / 삭제하기 
• 조건부 렌더링으로 특정 상황에서 다른 엘리먼트가 나타나게 하기 

 

 

직접 프로젝트를 만들어보니까 배운게 좀더 이해가 잘된다!

트윗 수정하는 부분은 시간을 들여서 조금 더 수정해볼 생각이다.