[SEB_FE_44] React(1) - React

오늘 배운 주제

---

• JSX
• React Twittler Intro

오늘 배운 내용

---

• JSX

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법

React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 함

React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.

• map을 이용한 반복

function Blog() {
  const postToElement = (post) => (
    <div>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

오늘의 과제

---

React Twittler Intro

• App.js

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker';
        const tweetUserNameClass = isParkHacker // 삼항 연산자를 이용하여 tweet.username 이 parkhacker 인 경우와 그렇지 않은 경우에 대해 className 을 지정
                ? 'tweet__username tweet__username--purple'
                : 'tweet__username';
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              <img src={tweet.picture}/>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className={tweetUserNameClass}>{tweet.username}</span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
              </div>
          </li>
        );
      })}
    </ul>
  );
};

오늘 과제는 쉽게 끝냈다. 내일 과제부터가 진짜 시작이다. 하나하나 해보면 "그래 이렇게 코드를 짰었지"하면서 재미있게 했었다. 과제는 너무 쉬워서 리뷰까지 할 필요는 없어보임