React Twittler State & Props

Twittler를 State, Props를 활용하여 새로운 트윗을 썼을때 트윗의 내용이 전송되는 From을 하였다.

Input

input의 onChange 이벤트를 사용하였다.

이벤트 객체 event를 파라미터로 받아와서 사용 할 수 있고 이 객체의 event.target 은 이벤트가 발생한

DOM인 input DOM을 가르키게 된다 DOM의 value 값을 사용하여 input에 넣어줄 수 있다. 

Tweet.js() - component

import React from 'react';
import './Tweet.css';

const Tweet = ({ tweet }) => {
  const parsedDate = new Date(tweet.createdAt).toLocaleDateString('ko-kr');

  return (
    <li className="tweet" id={tweet.id} key = {tweet.id}>
      <div className="tweet__profile">
        <img src={tweet.picture} />
      </div>
      <div className="tweet__content">
        <div className="tweet__userInfo">
          <div className="tweet__userInfo--wrapper">
            {/* TODO : 유져 이름이 있어야 합니다. */}
            {/* TODO : 트윗 생성 일자가 있어야 합니다. parsedDate를 이용하세요. */}
            <span className='tweet__username'>{tweet.username}</span>
            <span className='tweet__createdAt'>{parsedDate}</span>
          </div>
        </div>
        <div className="tweet__message">
          <div className='tweet__message'>{tweet.content}</div>
        </div>
      </div>
    </li>
  );
};

export default Tweet;

App.js

import React from 'react';
// TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다.
import { BrowserRouter, Routes, Route, Link, Router } from 'react-router-dom';

import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
// TODO : MyPage, About 컴포넌트를 import 합니다.
import MyPage from "./Pages/MyPage";
import About from "./Pages/About";

import './App.css';
import './global-style.css';

const App = (props) => {
  return (
    <BrowserRouter>
      <div className="App">
        <main>
          <Sidebar />
          <section className="features">
            {/* TODO : 유어클래스를 참고해서, 테스트 케이스를 통과하세요.
              TODO : React Router DOM 설치 후 BrowserRouter, Routes, Route의 주석을 해제하고 Routes, Route 컴포넌트를 적절하게 작성합니다. */}
            {/* Route 예시: <Route path="/" element={<Tweets />}></Route> */}
            <Routes>
              <Route path="/" element={<Tweets />}></Route>
              <Route path="/about" element={<About />}></Route>
              <Route path="/mypage" element={<MyPage />}></Route>
            </Routes>
          </section>
        </main>
      </div>
    </BrowserRouter>
  );
};

// ! 아래 코드는 수정하지 않습니다.
export default App;

Footer.js

import React from 'react';

const Footer = () => {
  return <footer></footer>;
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 요소 footer가 포함되어야 합니다.


export default Footer;

Sidebar.js

import React from 'react';
// TODO : React Router DOM의 Link 컴포넌트를 import 합니다.
import {Link} from 'react-router-dom'

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : Link 컴포넌트를 작성하고, to 속성을 이용하여 경로(path)를 연결합니다. */}
      <Link to = "/"><i className= "far fa-comment-dots"></i></Link>
      <Link to = "/about"><i className= "far fa-question-circle"></i></Link>
      <Link to = "/mypage"><i className= "far fa-user"></i></Link>
    </section>
  );
};

export default Sidebar;

Tweets.js - Pages

// TODO : useState를 react로 부터 import 합니다.
import React, { useState } from 'react';
import Footer from '../Footer';
import Tweet from '../Components/Tweet';
import './Tweets.css';
import dummyTweets from '../static/dummyData';

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  const [username,setUsername] = useState("");
  const [msg, setMsg] = useState("");
  const [data,setData] = useState(dummyTweets);
  let count = dummyTweets.length;

  const handleButtonClick = (event) => {
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.
    count++;
    const tweet = {
      id: count,
      username: username,
      picture : 'https://randomsur.me/api/portraits/men/98.jpg',
      content: msg,
      createdAt: new Date(),
      updateAt: new Date(),
    };
    setData([tweet, ...data]);
  };

  const handleChangeUser = (event) => {
    // TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
    setUsername(event.target.value);
  };

  const handleChangeMsg = (event) => {
    // TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
    setMsg(event.target.value);
  };

  return (
    <React.Fragment>
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">
                <input
                  type="text"
                  defaultValue="parkhacker"
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange = {handleChangeUser}
                  value = {username}
                ></input>
                <textarea
                  placeholder ='textarea'
                  className = "tweetForm__input--message"
                  onChange={handleChangeMsg}
                  value = {msg}
                >
                </textarea>
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
                  total: {data.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              < button className='tweetForm__submitButton' onClick={handleButtonClick}>
                tweet
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {data.map((tweet) => (
          <Tweet tweet = {tweet} />
        ))}
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;