오늘 한 과제중에서 제일 헷갈렸던 부분은 react의 요소에 조건을 달고 그 조건에 맞는 데이터에 다른 css를 붙여서 하이라이팅 해주는 과정이었다!
아직 그 방법에 익숙해지지 않아서 총 4가지의 방법으로 적용해보고 기록을 남긴다.📸
태그에 직접 조건
을 붙여서 className을 조건에 맞게 지정해주기조건식을 설정
하고 다른 변수에 담은 후 className의 변수에 넣어주기useState
를 이용해서 붙여주기함수로 설정
해서 붙여주기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>
);
};