import { export되어 있는 변수명 } from 위치 로 다른 js 파일에 위치한 더미 데이터가 담긴 배열의 변수명을 가지고 와서 리액트용 js 파일에 활용할 수 있다.
import React from "react";
import { dummyTweets } from "./static/dummyData";컴포넌트란?
하나의 기능 구현을 위한 여러 종류의 코드 묶음이다.
포털 사이트 화면을 예로 들면
가장 상위에 root 컴포넌트의 하위로 Header, Content, footer 로 나뉘고,
Header 하위로 검색창 컴포넌트, 로그인 컴포넌트
Content 하위로 뉴스기사 컴포넌트, 카페글 컴포넌트
footer 하위로 고객센터 컴포넌트 등으로 구성된 트리 구조로 되어 있다.
이러한 각 기능을 담당하는 컴포넌트들을 모아 복잡한 UI 또는 어플리케이션도 만들 수 있다.
Sidebar 컴포넌트 기술 요구사항
- App 컴포넌트의 후손 컴포넌트로 Sidebar 컴포넌트 작성
컴포넌트는 일반 함수와 달리 첫 글자를 대문자로 작성한다.
const App = () => { // App 컴포넌트
return (
<div className="App">
<main>
<Sidebar /> // 후손 컴포넌트로 Sidebar 컴포넌트 작성
<Features />
</main>
</div>
);
};- Font Awesome을 활용하여 트윗 메시지 아이콘 넣기
(className : "far fa-comment-dots")
js파일과 연결된 html 파일의 <head></head> 태그 안에
<script src="회원가입 후 받는 각자의 kits code" crossorigin="회원가입 후 받는 kit's code"></script>를 넣으면 className으로 각 아이콘을 사용할 수 있다.
html에서 class로 작성하던 클래스이름은 자바스크립트의 class와 구분하기 위해 JSX에서는 className으로 작성해야한다
className이 string이 아닌 자바스크립트의 표현식(변수명 등)일 때는 {}중괄호 안에 작성해야한다.
const Sidebar = () => {
return (
<>
<section className="sidebar">
// JSX에서 class 는 HTML과 달리 카멜표기법으로 className으로 작성해야한다
<i className={"far fa-comment-dots"}></i>
</section>
</>
);
};Counter 컴포넌트 기술 요구사항
- dummyTweet로 전달되는 트윗 개수와 카운트가 일치시키기
- total과 숫자가 콘텐츠에 작성
상단에서 import로 dummyTweets를 받아왔으므로,
변수명 그대로 { } 중괄호에 담에서 javascript 문법을 사용해 작성할 수 있다.
const Counter = () => {
return (
<div className="tweetForm__input">
<div className="tweetForm__inputWrapper">
<div className="tweetForm__count" role="status">
{`total ${dummyTweets.length}`}
</div>
</div>
</div>
);
};Footer 컴포넌트 기술 요구사항
- Footer 컴포넌트의 후손 엘리먼트로
시맨틱 엘리먼트 <footer>작성
<div></div>로 되어 있던 엘리먼트를 <footer></footer>로 변경한다.
div로 작성되어 있으면 해당 엘리먼트가 의미하는 바가 명확하지 않다.
footer에 해당하는 부분인 경우 엘리먼트만 보고도 코드의 의미를 알 수 있도록 footer 엘리먼트로 작성해주는 것이 바람직하다.
return (
<footer> // <div> → <footer> 로 엘리먼트를 변경했다.
<img id="logo" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} />
Copyright @ 2022 Code States
</footer>
);
};Tweets 컴포넌트 기술 요구사항
Tweets 컴포넌트의 자료가 되는 dummyTweets 배열의 요소인 객체의 구성은 다음과 같다.
dummyTweets=[ {
id: 1,
username: 'kimcoding',
picture: `https://randomuser.me/api/portraits/women/1.jpg`,
content: '모든 국민은 인간으로서의 ... ',
createdAt: '2019-02-24T16:17:47.000Z',
updatedAt: '2019-02-24T16:17:47.000Z'
}
/* 중략 */
]배열.map((요소)=>{return 요소에 적용할 내용}) 메소드를 활용해 dummyTweets 배열의 요소로 들어있는 객체의 프로퍼티 중 적절한 프로퍼티 키로 원하는 데이터를 찾는다.
-
트윗 저자의 프로필 사진 넣기
li.tweet 엘리먼트의 후손 엘리먼트로<img>엘리먼트를 생성하고 dummyTweets의 이미지 주소 정보가 적힌 프로퍼티 키요소.picture를<src>속성으로 지정 -
유저 이름 넣기, 클래스 이름은 tweet__username으로 지정
li.tweet 엘리먼트의 후손 엘리먼트로<span>엘리먼트를 생성하고 dummyTweets의 요소에서 유저 이름이 담긴 프로퍼티키요소.username를<span>의 텍스트 콘텐츠로 넣는다. -
트윗 메시지 넣기, 클래스 이름은
tweet__message으로 지정- 트윗이 dummyTweets의 길이만큼 있어야 합니다.
- dummyTweets에 트윗이 n개 전달되면, 화면에 트윗이 n개가 보여야 합니다.
li.tweet 엘리먼트의 후손 엘리먼트로 <div> 엘리먼트를 생성하고 dummyTweets의 요소에서 트윗 내용이 담긴 프로퍼티 키 요소.content를 <div> 의 텍스트 콘텐츠로 넣는다.
map 매소드로 dummyTweets 배열 안의 모든 요소들을 순회하므로, dummyTweets에 담긴 객체의 개수 n개만큼 전달이 된다.
- 트윗 생성 일자(yyyy. m. d.) 넣기, 클래스 이름은
tweet__createdAt으로 지정- li.tweet 엘리먼트의 후손 엘리먼트로
<span>엘리먼트를 생성하고 dummyTweets의 요소에서 트윗 생성 일자가 담긴 프로퍼티 키요소.createdAt를<span>의 텍스트 콘텐츠로 넣는다.
- li.tweet 엘리먼트의 후손 엘리먼트로
const Tweets = () => {
return (
<ul className="tweets">
{dummyTweets.map((tweet) => { // map 메소드로 dummyTweets 배열의 각 요소들탐색
return (
<li className="tweet" key={tweet.id}> // 가장 상위 엘리먼트에 요소의 고유한 key를 넣어줘야한다.
<div className="tweet__profile"> /* 트윗 저자 프로필 사진 */
<img src={tweet.picture}></img> // javascript 표현식은 {} 안에 작성
</div>
<div className="tweet__content">
<div className="tweet__userInfo">
<span className="tweet__createdAt">{tweet.createdAt}</span> /* 트윗 생성일자 */
<span className="tweet__username">{tweet.username}</span> /* 유저 이름 */
</div>
<div className="tweet__message">{tweet.content}</div> /* 트윗 메시지 */
</div>
</li>
);
})}
</ul>
);
};- 조건부 렌더링을 활용해서 여러 트윗 중 유저 이름이 parkhacker인 배경색이 var(--point-color-tint-2)가 되도록 클래스(tweet__username--purple)를 지정
조건문은 삼항 연산자 조건 ? true일 때 : false일 때를 이용한다.
변수 선언 등은 map 메서드의 중괄호 안에서 할 수 있다.
const Tweets = () => {
return (
<ul className="tweets">
{dummyTweets.map((tweet) => {
/* 여기서 변수 선언 */
const isParkHacker = tweet.username === "parkhacker";
const tweetUserNameClass = isParkHacker
? "tweet__username tweet__username--purple"
: "tweet__username";
const
const
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="tweet__createdAt">{tweet.createdAt}</span> /* 트윗 생성일자 */
//조건에 따라 클래스 네임이 달라지도록 className으로 tweetUserNameClass 사용, 자바스크립트 표현식이므로 { } 안에 작성한다.
<span className={tweetUserNameClass}>{tweet.username}</span> /* 유저 이름 */
</div> /* 트윗 메시지 */
<div className="tweet__message">{tweet.content}</div>
</div>
</li>
);
})}
</ul>
);
};