src/App.js에import된./static/dummyData.js
import React from 'react';
import './App.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.
console.log(dummyTweets) // 개발 단계에서 사용하는 더미 데이터입니다.Font Awesome Hands-on
- Font Awesome은 자주 사용되는 아이콘을 쉽게 접근할 수 있도록 모아놓은 오픈소스 라이브러리
폰트어썸 공식문서
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Practice</title>
<meta charset="UTF-8" />
<!-- Font Awesome을 쓰기 위해서는 아래와 같이 js 파일을 서버에서 불러와야 합니다. -->
<script
src="https://kit.fontawesome.com/14d687cae1.js"
crossorigin="anonymous"
></script>
</head>
<style>
.far,
.fas,
.fab {
font-size: 5rem;
color: var(--default-text-color);
padding: 1.3rem;
cursor: pointer;
}
</style>
<body>
<div id="app">
<!-- Font Awesome 홈페이지를 참고하여 다른 아이콘도 적용해보세요. -->
<i class="far fa-comment-dots"></i>
<i class="fas fa-address-book"></i>
<i class="fab fa-behance"></i>
<i class="fab fa-aws"></i>
</div>
</body>
</html>
조건부 렌더링 Hands-on
username이 'parkhacker'인 것 찾아 css로 보라색 배경색 주기.-
const isParkHacker = tweet.username === 'parkhacker';식 자체를 변수에 할당 가능하다!!!
import "./styles.css";
import { dummyTweets } from "./dummyData";
const App = () => {
return (
<ul className="tweets">
{dummyTweets.map((tweet) => {
const isParkHacker = tweet.username === 'parkhacker';
// username 이 'parkhacker'인 경우를 할당한 isParkHacker 변수와
const tweetUserNameClass = isParkHacker
? 'tweet__username tweet__username--purple'
: 'tweet__username';
// 삼항연산자를 사용하여 className 을 지정한
// tweetUserNameClass 변수를 이곳에 사용합니다.
return (
<li className="tweet" key={tweet.id}>
<span className= {tweetUserNameClass}>
{tweet.username}
{/* span tag 안에 className 을 지정하고,
span tag 사이에는 username이 rendering 되도록 합니다. */}
</span>
</li>
);
})}
</ul>
);
};
export default App;
프론트엔드 개발자