S2) Unit 6. [실습] React Twittler State & Props

📣  리액트로 Twitter 구현하기

✔️ react-router-dom 사용하기

✔️ state & props 사용해서 전송 트윗 만들기

✔️ 기본 페이지 컴포넌트 구현하기

✔️ font awesome 사용하기

 

📣 주요 컴포넌트

1️⃣ App.js

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

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

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="/about" element={<About />} />
              <Route path="/mypage" element={<MyPage />} />
            </Routes>
          </section>
        </main>
      </div>
    </BrowserRouter>
  );
};

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

➰ BrowserRouter, Routes, Route 사용해서 특정 경로에는 특정 컴포넌트만 띄우게 한다.

 

2️⃣ Sidebar.js

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

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;

➰ font awesome 사용해서 아이콘 불러오고, Route와 동일한 경로를 Link에 설정해서 페이지 이동 가능하게 하기

 

3️⃣ 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 [inputText, setInputText] = useState('');
  const [textareaContent, setTextareaContent] = useState('');
  const [totalTweets, setTotalTweets] = useState(dummyTweets);

  const handleButtonClick = (event) => {
    const getRandomNumber = (min, max) => {
      return parseInt(Math.random() * (Number(max) - Number(min) + 2));
    };
    
    const tweet = {
      id: totalTweets.length+1,
      username: inputText,
      picture: `https://randomuser.me/api/portraits/women/${getRandomNumber(
        1,
        98
      )}.jpg`,
      content: textareaContent,
      createdAt: new Date().toLocaleDateString('ko-kr'),
      updateAt: new Date().toLocaleDateString('ko-kr')
    };
    // TODO : Tweet button 엘리먼트 클릭시 작동하는 함수를 완성하세요.
    // 트윗 전송이 가능하게 작성해야 합니다.
    setTotalTweets([tweet, ...totalTweets]);
  };

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

  const handleChangeMsg = (event) => {
    // TODO : Tweet textarea 엘리먼트에 입력 시 작동하는 함수를 완성하세요.
    setTextareaContent(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}
                ></input>
                <textarea
                  placeholder="your text here.."
                  className="tweetForm__input--message"
                  onChange={handleChangeMsg}>    
                </textarea>
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
                  {'total: ' + totalTweets.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              <button
                className="tweetForm__submitButton"
                onClick={handleButtonClick}>전송
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {totalTweets.map((tweet) => {
          return <Tweet tweet={tweet} key={tweet.id} />
        })}
      </ul>
      <Footer />
    </React.Fragment>
  );
};

export default Tweets;

➰ useState() 사용해서 닉네임 쓰는 입력칸, 트윗 내용 쓰는 텍스트칸, 전체 트윗 데이터를 관리해준다.

➰ 새로 트윗을 추가하면 전체 트윗이 늘어나야 하므로, 전송 버튼을 누르면 전체 트윗 데이터가 추가한 트윗이 더해진 데이터가 되야한다.

➰ 닉네임 입력칸, 텍스트 입력칸은 사용자가 적을 때마다 변해야 하므로, event 객체를 이용해서 값을 받아오고, onChange에 그 함수를 전달해준다.

 

📣 시연화면

css는 안할랭..