React 실습 - React Twittler Intro

React실습으로 유명 SNS서비스인 Twitter와 유사한 Twittler를 React로 개발해보려 한다.

App.js

import React from 'react';
import './App.css';
import { dummyTweets } from './static/dummyData';

console.log(dummyTweets) // 개발 단계에서 사용하는 더미 데이터

const Sidebar = () => {
  return (
    <section className="sidebar">
      <i className = "far fa-comment-dots"></i>
    </section>
  );
};

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          {'total:' + dummyTweets.length}
// dummyTweet로 전달되는 데이터의 개수
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return <div>
    <footer>Copyright @ 2022 Code States</footer>
  </div>;
};
// Footer 함수 컴포넌트를 작성, 시멘틱 엘리먼트 footer가 포함

const Tweets = () => {
  return (
// 조건부 렌더링을 활용해서 여러 트윗 중 username 배경색이 var(--point-color-tint-2)가 되도록 클래스(.tweet__username--purple)를 지정
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src = {tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {tweet.username === "parkhacker" ? <span className = "tweet__username tweet__username--purple">{tweet.username}</span> : <span className = "tweet__username">{tweet.username}</span>}
                <span className = "tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className = "tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer />
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar />
        <Features />
      </main>
    </div>
  );
};


export { App, Sidebar, Counter, Tweets, Features, Footer };