React Twittler State & Props 과제

https://github.com/forhrever/fe-sprint-react-twittler-state-props.git

React Router 설치

• React Router를 npm으로 설치해야 합니다.

npm install react-router-dom@6.3.0

**상세 컴포넌트 구현하기(App.js)**

• Route path가 "/" 인 Tweets 컴포넌트가 있어야 합니다.
• Route path가 "/about" 인 About 컴포넌트가 있어야 합니다.
• Route path가 "/mypage" 인 MyPage 컴포넌트가 있어야 합니다.

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

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

{ /* 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>

Sidebar 컴포넌트 (Sidebar.js)

• Tweets 아이콘의 Link 컴포넌트는 "/" 로 연결되어야 합니다.
• About 아이콘의 Link 컴포넌트는 "/about" 로 연결되어야 합니다.
• MyPage 아이콘의 Link 컴포넌트는 "/mypage" 로 연결되어야 합니다.

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

{/* 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>

Footer 컴포넌트 (Footer.js)

• Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 <footer>가 있어야 합니다.

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

Tweet 컴포넌트 (Tweet.js)

• 각 트윗에 꼭 필요한 정보를 담고 있어야 합니다. (프로필 사진, 유저 이름, 트윗 생성 일자, 트윗 메시지)

  • 프로필 사진을 넣기 위해 <img> 엘리먼트를 작성하고, src 속성에 전달받은 props의 사진 정보가 들어가 있는지 확인해 주세요.

    <div className="tweet__profile">
       <img src={tweet.picture} />
    </div>

  • 유저 이름을 넣기 위해 <span> 엘리먼트를 작성하고, class 이름을 tweet__username로 지정하세요.

    {/* TODO : 유져 이름이 있어야 합니다. */}
        <span className="tweet__username">{tweet.username}</span>

  • 트윗 생성 일자를 넣기 위해 <span>엘리먼트를 작성하고, class 이름을 tweet__createdAt으로 지정하세요.
    - 날짜 형식은 yyyy. mm. dd. 이어야 하고, parsedDate 변수를 이용하세요.

    {/* TODO : 트윗 생성 일자가 있어야 합니다. parsedDate를 이용하세요. */}
         <span className="tweet__createdAt">{parsedDate}</span>

  • 트윗 메시지를 넣기 위해 <div> 엘리먼트가 작성되어 있습니다. class 이름을 tweet__message로 지정되어 있는지 확인해 주세요.
    - 트윗 메시지를 div.tweet__message의 textContent로 넣습니다.

    <div className="tweet__message">
              { /* TODO : 트윗 메세지가 있어야 합니다. */}
              {tweet.content}
    </div>

페이지 컴포넌트 구현하기 (MyPage.js)

페이지를 구성하는 컴포넌트를 작성합니다.

이번 과제의 현재 유저는 parkhacker이기 때문에, Twittler의 MyPage에서 parkhacker의 트윗만 보여야 하는 요구사항을 만족해야 합니다.

const MyPage = () => {
  const filteredTweets = dummyTweets.filter( (tweet) => {
    return tweet.username === "parkhacker";
  });
  // TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다.
return ...

MyPage 컴포넌트 (MyPage.js)

• 주어진 트윗 목록(dummyTweets)중 현재 유저인 parkhacker의 트윗만 보여야 합니다.
• const 변수로 선언된 filteredTweets을 활용해 parkhacker의 트윗이 보이도록 구현해 주세요.

<ul className="tweets__mypage">
    <Tweet tweet={filteredTweets[0]}/>
{/* TODO : 주어진 트윗 목록(dummyTweets)중 현재 유져인 parkhacker의 트윗만 보여줘야 합니다. */}
</ul>

Tweets 컴포넌트 (Tweets.js)

• 하나의 트윗이 아니라, 주어진 트윗(dummyTweets) 개수에 맞게 보여줘야 합니다.

<span className="tweetForm__count__text">
{/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
    {'total: ' + tweets.length}
</span>

트윗 전송 Form 테스트 (Tweets.js)

• 유저 이름을 작성할 수 있는 input 엘리먼트가 있어야 합니다. (className : "tweetForm__input--username")
• <input>의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다.

<div className="tweetForm__input">
<input
   type="text"
   defaultValue="parkhacker"
   placeholder="your username here.."
   className="tweetForm__input--username"
   onChange = {handleChangeMsg}
></input>

• 트윗을 작성할 수 있는 textarea 엘리먼트가 있어야 합니다. (className : "tweetForm__input--message")
• <textarea>의 값이 변경될 때 onChange 이벤트 핸들러가 불려야 합니다.

{ /* TODO : 트윗을 작성할 수 있는 textarea 엘리먼트를 작성하세요. */} 
   <textarea
       defaultValue = {""}
       parkhacker = "your message here.."
       className = "tweetForm__input--message"
       onChange = {handleChangeMsg}
       value = {msg} 
    ></textarea>

• 트윗을 전송할 수 있는 button 엘리먼트가 있어야 합니다. (className : "tweetForm__submitButton")
• <button>의 값이 변경될 때 onClick 이벤트 핸들러가 불려야 합니다.

{/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
<button className='tweetForm__submitButton' onClick={handleButtonClick}>Tweet</button>

• 유저 이름과 트윗을 작성하고, 트윗 버튼을 누르면 새로운 트윗이 추가되어야 합니다.
  • 기존 dummyTweets를 모두 보여줘야 합니다.
  • 새로 추가된 트윗을 포함하여 보여줘야 합니다.
  • 새로 추가된 트윗이 최상단에 위치하여야 합니다.

<ul className="tweets">
{/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
{tweets.map((el) => { 
    return (
      <Tweet tweet={el} />
    )})}
</ul>

구현된 모습 ( 메시지 입력창에 ‘행복하자’ 입력 후 Tweet 한 결과 )

---

onChange

<input> <textarea> <select> 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용됩니다.

• onChange이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올 수 있습니다.
• 이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱신합니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트입니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button> // onClick 
      <h1>{name}</h1>
    </div>
  );
};