TIL(20210708) - JSX규칙

🎁  Daily

• JSX문법 학습 및 활용, map을 이용한 반복 활용, React 학습
• 간단한 React 앱 만들기(JSX 문법을 사용)

🤔  Learned

JSX 규칙

- 하나의 엘리먼트 안에 모든 엘리먼트를 포함한다.

 

- 엘리먼트 클래스 사용 시, className 으로 표기한다.

 

- JavaScript 표현식 사용 시, 중괄호({}) 이용

- 사용자 정의 컴포넌트는 대문자로 시작

 

- 조건부 렌더링에는 삼항연산자 사용

- 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

---

React 에서 map()을 사용해서 엘리먼트를 표시하는 부분은 정말 중요하다!

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker';
        const tweetUserNameClass = isParkHacker
          ? '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>
  );
};

 

🧐 

배운 것들이 점점 늘어갈수록 정리하기가 힘들어진다
웬만하면 하루 안에 끝내고 싶은데 조금씩 밀리는 게 있다 보니
양이 점점 방대해지네... 피곤해도 하고 자자.

🌈  Tomorrow

• React 학습
• 알고리즘  풀기