Tweets.js
// 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 [tweets, settweets] = useState(dummyTweets);
const [user, setuser] = useState("");
const [text, settext] = useState("");
const handleButtonClick = (event) => {
const tweet = {
id: 1,
username: user,
picture: "https://randomuser.me/api/portraits/men/98.jpg",
content: text,
createdAt: new Date().toLocaleDateString(),
updatedAt: new Date().toLocaleDateString(),
};
dummyTweets.map((val) => val.id++);
settweets([tweet, ...dummyTweets]);
setuser("");
settext("");
// TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
// 트윗 전송이 가능하게 작성해야 합니다.
};
const handleChangeUser = (event) => {
// TODO : Tweet input 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
setuser(event.target.value);
};
const handleChangeMsg = (event) => {
// TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
settext(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"
placeholder="your username here.."
className="tweetForm__input--username"
onChange={handleChangeUser}
value={user}
></input>
<textarea
className="tweetForm__input--message"
onChange={handleChangeMsg}
value={text}
></textarea>
</div>
<div className="tweetForm__count" role="status">
<span className="tweetForm__count__text">
{/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
{"total: "}
{tweets.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) 갯수에 맞게 보여줘야 합니다. */}
{tweets.length > 1 ? (
tweets.map((val) => <Tweet key={val.id} tweet={val} />)
) : (
<Tweet tweet={tweets[0]} />
)}
</ul>
<Footer />
</React.Fragment>
);
};
export default Tweets;
useState를 사용하여 상위 폴더에 있는 dummydata를 할당한다.
tweet를 선언하여 추가할 객체를 만들어주고 알맞은 값을 설정해준다.
새롭게 추가된 메세지는 맨 위에 위치 시켜야한다. 그래서 인덱스 첫번째 위치에 값을 넣어줘야한다. 따라서 id값을 1로 설정해주고 원래 있던 dummyTweets에서 id값을 1씩 증가시킨다.
입력을 마치고 버튼을 누르면 user, text값은 빈 문자열로 초기화 시켜준다.
MyPage.js
import React from "react";
import Footer from "../Footer";
import Tweet from "../Components/Tweet";
import "./MyPage.css";
import dummyTweets from "../static/dummyData";
const MyPage = () => {
const filteredTweets = dummyTweets.filter(
(val) => val.username === "parkhacker"
);
// TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다.
return (
<section className="myInfo">
<div className="myInfo__container">
<div className="myInfo__wrapper">
<div className="myInfo__profile">
<img src={filteredTweets[0].picture} />
</div>
<div className="myInfo__detail">
<p className="myInfo__detailName">
{filteredTweets[0].username} Profile
</p>
<p>28 팔로워 100 팔로잉</p>
</div>
</div>
</div>
<ul className="tweets__mypage">
<Tweet tweet={filteredTweets[0]} />
{/* TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다. */}
</ul>
<Footer />
</section>
);
};
export default MyPage;
MyPage에서는 자신이 올린 트윗만 보여줘야한다.
따라서 filter를 사용하여 현재 유저인 parkhacker의 트윗만 보여준다.
현재 parkhacker의 트윗은 하나이므로 filteredTweets의 첫번째 값만 보여줬다.
Tweet.js
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}>
<div className="tweet__profile">
<img src={tweet.picture} />
</div>
<div className="tweet__content">
<div className="tweet__userInfo">
<div className="tweet__userInfo--wrapper">
{/* TODO : 유져 이름이 있어야 합니다. */}
<span className="tweet__username">{tweet.username}</span>
{/* TODO : 트윗 생성 일자가 있어야 합니다. parsedDate를 이용하세요. */}
<span className="tweet__createdAt">{parsedDate}</span>
</div>
</div>
<div className="tweet__message">{tweet.content}</div>
</div>
</li>
);
};
export default Tweet;
Tweets.js에서 넘겨준 값을 tweet으로 설정하고 알맞은 값을 배치했다.
App.js
import React from "react";
// TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다.
import { BrowserRouter, Routes, Route } 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 path="/mypage" element={<Mypage />} />
<Route path="/about" element={<About />} />
</Routes>
</section>
</main>
</div>
</BrowserRouter>
);
};
// ! 아래 코드는 수정하지 않습니다.
export default App;
react-router-dom을 사용하여 화면에 따라 다른 주솟값을 설정했다.
Link를 통해 주소에 접근할 수 있다.
즐겁게 코딩 ૮₍ •̀ᴥ•́ ₎ა