소품 할당에 응답

경로는 BrowserRouter, 경로 및 경로를 사용하여 생성됩니다.

기본 경로 경로 경로=”/”는 트윗 요소를 로드합니다.

“MyPage”는 “Route path=”/mypage””로 설정되고 “MyPage” 요소가 호출됩니다.

경로 경로 = About에 대해 “/about”이 설정되고 About 요소가 호출됩니다.

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

사이드바 가져오기 링크.

Link to를 사용하여 App.js에 지정된 경로를 연결합니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      <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>
  );
};

트윗 컴포넌트는 기본적으로 트윗을 만들어 리를 구성합니다.

소품을 작성하려면 중괄호를 사용하십시오.

{tweet.id}

{트윗.이미지}

{트윗.사용자 이름}

{parseDate}

{텍스트 내용}

const Tweet = ({ tweet, handleDeleteTweet, idx }) => {
  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">
            <span className="tweet__username">{tweet.username}</span>
            <span className="tweet__createdAt">{parsedDate}</span>
          </div>
          <div className="tweet__userInfo--buttonWrapper">
            <button
              className="tweet__deleteButton"
              onClick={() => handleDeleteTweet(tweet.username, idx)}
            >
              <i className="far fa-trash-alt"></i>
            </button>
          </div>
        </div>
        <div className="tweet__message">{tweet.content}</div>
      </div>
    </li>
  );
};

Tweets.js는 버튼 이벤트, 카운터 및 트윗 목록을 구현합니다.

useState를 사용하여 초기 상태 값을 설정합니다.

  const (username, setUsername) = useState('parkhacker');
  const (msg, setMsg) = useState('');
  const (tweets, setTweets) = useState(dummyTweets);
  const (filteredTweets, setFilteredTweets) = useState(dummyTweets);
  const (isFiltered, setIsFiltered) = useState(false);
  const (currentUsername, setCurrentUsername) = useState('default');

버튼을 클릭했을 때 실행되는 함수는 handleButtonClick입니다.

버튼 요소에 함수를 onClick={handleButtonClick}으로 설정합니다.

트윗에 새 트윗 개체를 만들고 newTweets의 첫 번째 요소로 삽입하고 기존 트윗을 확장합니다.

  const handleButtonClick = (event) => {
    const tweet = {
      id: shortid(),
      username: username,
      picture: 'https://randomuser.me/api/portraits/men/98.jpg',
      title: 'new Tweet',
      content: msg,
      createdAt: new Date().toLocaleDateString('ko-KR'),
      updatedAt: new Date().toLocaleDateString('ko-KR'),
    };
    const newTweets = (tweet, ...tweets);
    setTweets(newTweets);
  };