TIL (React 여러방법으로 작성해보기)

돌리의 하루·2023년 1월 20일
0

오늘 한 과제중에서 제일 헷갈렸던 부분은 react의 요소에 조건을 달고 그 조건에 맞는 데이터에 다른 css를 붙여서 하이라이팅 해주는 과정이었다!
아직 그 방법에 익숙해지지 않아서 총 4가지의 방법으로 적용해보고 기록을 남긴다.📸

  1. 태그에 직접 조건을 붙여서 className을 조건에 맞게 지정해주기
  2. 변수에 조건식을 설정하고 다른 변수에 담은 후 className의 변수에 넣어주기
  3. useState를 이용해서 붙여주기
  4. 변수에 함수로 설정해서 붙여주기
const Tweets = () => {
  
  return (

    <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>
  );
};

처음에는 삼항조건문으로 작성했다.

이제 다른 방식으로 해볼거임

두 번째 방식은 삼항조건을 실행하는 변수를 만들고 또다른 변수에 담은후 className에 변수를 넣어주는 방법!

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}></img>
            </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>
  );
};

세 번째로 만들어볼 방법은요
useState를 이용해서 만들어봅니다!

const Tweets = () => {
  let [parkhacker, setParkHacker] = useState('parkhacker')
  return (
  
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
         const realpark = tweet.username === parkhacker
         const  tweetUserNameClass = realpark
         ? '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={tweetUserNameClass}>{tweet.username}</span>}
                <span className='tweet__createdAt'>{tweet.createdAt}</span>
              </div>
              <div className='tweet__message'>{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};

네 번째는 Tweets 안에 변수설정말고 함수로 만든 후 className에 함수로 넣어주는 방법으로 작성했다.

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

        let parkhacker =(tweet) => {
         return tweet.username === "parkhacker"
        }

        let tweetUserNameClass = (tweet) => {
          return parkhacker(tweet) 
          ? '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={tweetUserNameClass(tweet)}>{tweet.username}</span>
                <span className='tweet__createdAt'>{tweet.createdAt}</span>
              </div>
              <div className='tweet__message'>{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};
profile
진화중인 돌리입니다 :>

0개의 댓글