변수를 적용하는경우

 <span className={tweet.username === 'parkhacker'  
  ? 'tweet__username tweet__username--purple' : 'tweet__username'
  }>
 {tweet.username}
 </span>

 

변수를 적용하게 바꾸는 경우

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {   
      const parklassName =              //여기에 변수추가!!
      tweet.username === 'parkhacker'
      ? 'tweet__username tweet__username--purple'
      : 'tweet__username';
         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">         
             <span className={parkClassName}>{tweet.username}</span>  //여기에 변수적용!              
                <span className = "tweet__createdAt">{tweet.createdAt}</span>
              </div>             
              <div className = "tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};