[React] Twittler intro

2022.11.25

💡 React 간단한 실습예제

📌 Twittler intro 과제

Bare Minimum

const Tweets = () => {
  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {

        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
              {/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                {/* TODO : 유져 이름이 있어야 합니다. */}
                {/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
                {/* TODO : 트윗 생성 일자가 있어야 합니다. */}
              </div>
              TODO : 트윗 메세지가 있어야 합니다.
            </div>
						.......

자료는 다음과 같이 주어졌고 dummyData.js를 활용해서 문제를 해결하면 되는 비교적 간단한 과제였다.

내가 복잡하게 생각했던 map은 이미 작성이 완료되어있었고 key값도 이미 주어져있어 체크만 간단히하고 컴포넌트를 이해하기 위한 과제이구나 라고 생각했다.

내 풀이

<div className="tweet__profile">
	{/* TODO: 트윗 저자의 프로필 사진이 있어야 합니다.  */}
  <img src= {tweet.picture}></img>
</div>
 <div className="tweet__content">
   <div className="tweet__userInfo">
				{/* TODO : 유져 이름이 있어야 합니다. */}
    		{/* TODO : 이름이 "parkhacker"인 경우, 이름 배경색을 rgb(235, 229, 249)으로 바꿔야 합니다. */}
    		{tweet.username === 'parkhacker' 
     		? <span className='tweet__username--purple'>{tweet.username}</span> 
        : <span className='tweet__username'>{tweet.username}</span>}
     		{/* TODO : 트윗 생성 일자가 있어야 합니다. */}
          <span className='tweet__createdAt'>{tweet.createdAt}</span>
    </div>
		<div className='tweet__message'>{tweet.content}</div>
	</div>

이 외에도 시멘틱엘리먼트를 요하는 문제, 후손 컴포넌트를 요하는 문제, Total data를 요하는 문제들이 있었지만 비교적 간단해서 이 부분들만 정리해보았다.

이중에서 생각을 많이 하게 했던 건 역시 삼항연산자였다.( 박해커인 경우 배경색 지정하는 문제 ) 앞서 포스팅했듯 if문은 표현식이 아니기 때문에 리액트에서는 삼항연산식으로 조건문을 작성한다.

사실 처음 작성했던 코드는 위의 코드가 아니었다. 듀토리얼을 그대로 따랐다.

// tweet 중에서 이름이 "parkhacker"인 사람만 변수에 할당하고
const isParkHacker = tweet.username === 'parkhacker'

// 삼항연산자를 사용해서 박해커이면 클래스 네임이 두개 들어가게
// 아니면 클래스 네임이 하나만 적용되게 해준다
const tweetUserNameClass = isParkHacker
          ? 'tweet__username--purple'
          : 'tweet__username';
          
// 클래스이름 안에다 넣어주면 끝난다          
<li className="tweet" key={tweet.id}>
  <span className={tweetUserNameClass}>{tweet.username}</span>
</li>          

이때 당시 코드가 생각보다 너무 길다 생각해서 이렇게 짜지 않고 위의 내 풀이대로 제출을 했는데 지금보니 이게 오히려 가독성이 더 좋은 것 같기도 하다.