4. 프론트엔드의 역할은 어디까지 - 더미데이터 만들기
더미데이터를 만들어 컴포넌트에 데이터를 전달해보고, map()을 이용해 더 계층적인 컴포넌트로 리팩토링 해보면서 느낀점들.
1. 목표
예발자닷컴 코드 리팩토링하기
더미데이터 배열 만든 뒤
TimelineListItem컴포넌트에 각각 다른 데이터 넣기.
2. 현재 컴포넌트 구조
TimelineListTimelineListItemTitle : "2차"
Status : "모집중"
Content : "온라인 코딩테스트"
Date : "7. 4."
3. map() 메서드를 사용하는 이유
리액트에서는 state 내부의 값을 직접적으로 수정하면 안 된다. 이를 불변성 유지라고 한다.
push, splice, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 불변성 유지 원칙에 적합하지 않다. 그 대신에, 기존의 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter 같은 함수를 사용해야한다고 한다.
4. map() 메서드 사용법
map() 메서드는 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.
주의 :
callback함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않기 때문에 값을 꼭 초기화해두자.
const dataSet = [{
name : 'daelee',
age : '24'},
{
name : 'secho',
age : '27'}];
dataSet.map(obj => obj.name = 'taelee');
console.log(dataSet[0].name);> "taelee"더 다양한 예제는 여기 참고.
4.1. 프로토타입
arr.map(callback(currentValue[, index[, array]])[, thisArg])매개변수
currentValue: 처리할 현재 요소.index: 처리할 현재 요소의 인덱스.array:map()을 호출한 배열. <- 어떤 용도인지 잘 이해안됨. 그냥 써두는건가?
반환 값
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
5. Refactoring
5.1. TimelineList 수정
export function TimelineList() {
const dataList = [
{
title: "-",
status: "-",
content: "-",
date: "-"
},
{
title: "-",
status: "-",
content: "-",
date: "-"
},
{
title: "-",
status: "-",
content: "-",
date: "-"
},
{
title: "-",
status: "-",
content: "-",
date: "-"
},
{
title: "-",
status: "-",
content: "-",
date: "-"
},
{
title: "-",
status: "-",
content: "-",
date: "-"
},
]
return (
<>
{dataList.map((v, idx) => <TimelineListItem data={v} key={idx}/>)}
</>
)
}dataList라는 더미데이터 배열을 만든다. 프론트에서 여기까지 해놔야 서버에서 어떤 데이터를 가져올지 감을 잡을 수 있다.{dataList.map((v, idx) => <TimelineListItem data={v} key={idx}/>)}모든
dataList에map()을 적용한TimelineListItem을 반환한다.v에는 아래 배열 하나하나, 총 6개의 배열이 리스트로 담긴다.{ title: "2차", status: "모집중", content: "온라인 코딩테스트", date: "7. 4." },TimelineListItem에v를data로,idx를key로 담아 보낸다.
5.2. TimelineListItem 수정
export function TimelineListItem ({data}) {
return (
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_edu]: true})}>
{data.title}
<span className={styles[data.status]}></span>
<div className={styles.content}>{data.content}</div>
<div>{data.date}</div>
</div>
</li>
)
}원래 하드코딩 되어있던 title, status, content, date의 내용을
datastate의 값들로 바꿔주었다.아직 idx는 사용하지 않았는데, 추후 css를 인덱스 별로 다르게 적용할 때 사용하려고 한다.
5.3. HorizontalTimeline 에서의 호출
export default function HorizontalTimeline() {
return (
<div className={styles.body}>
<Header className={styles.header}>
<h1>네이버 부스트캠프</h1>
<p>개발자의 지속 가능한 성장을 추구하는 학습 커뮤니티</p>
</Header>
<div className={styles.line}></div>
<div className={styles.timeline}>
<TimeLineList />
</div>
</div>
);
}<TimeLineList />를 단 한번 호출하는 것만으로 총 6개의 타임라인 리스트 아이템이 렌더링된다.아래 원래
HorizontalTimeline코드와 비교해보면 얼마나 코드가구조화되고, 깔끔해졌고, 리액트스러워졌는지 알 수 있다...!
export default function HorizontalTimeline() {
return (
<div className={styles.body}>
<Header className={styles.header}>
<h1>네이버 부스트캠프</h1>
<p>개발자의 지속 가능한 성장을 추구하는 학습 커뮤니티</p>
</Header>
<div className={styles.line}></div>
<div className={styles.timeline}>
<ol className={styles.order}>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_end]: true})}>
접수기간<span className={styles.status_end}>마감</span><div className={styles.content}>6.1 11:00 ~ 6.30 23:59</div>
</div>
</li>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_end]: true})}>
1차<span className={styles.status_end}>마감</span><div className={styles.content}>온라인 코딩테스트<br/>7.4</div>
</div>
</li>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_now]: true})}>
2차<span className={styles.status}>모집중</span><div className={styles.content}>온라인 코딩테스트<br/>7.4</div>
</div>
</li>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_now]: true})}>
최종 합격자 발표<span className={styles.status}>모집중</span><div className={styles.content}>수료자 선발<br/>7.20</div>
</div>
</li>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_edu]: true})}>
부스트캠프 챌린지<span className={styles.status_edu}>D-43</span><div className={styles.content}>수료자 선발<br/>7.27 ~ 8.21</div>
</div>
</li>
<li className={styles.list}>
<div className={classNames({[styles.card]: true, [styles.card_edu]: true})}>
부스트캠프 멤버쉽<span className={styles.status_edu}>D-55</span><div className={styles.content}>챌린지 과정 수료자만<br/>8.31 ~ 12.21</div>
</div>
</li>
<li>
</li>
</ol>
</div>
</div>
);
}6. 결론
6.1. 프론트엔드의 역할이 어디까지인지 이해하게 됐다.
지금까지 너무 css 스타일링 위주로 시간을 투자했었다. 그게 프론트엔드가 할 일의 전부인 줄로만 알고!
서버에서 데이터를 슬슬 받아와야 할 때쯤 그래서 그걸 누가 어떻게하지? 라는 고민이 들면서 리팩토링이 시작됐다.
하드코딩 스타일로 값을 넣어둘 게 아니라, 마치 서버에서 데이터를 받아온 것 처럼 더미데이터 배열을 만들고 그녀석을 활용해 html 구조를 짜봐야한다.
그래야
서버측에 어떤 데이터를 요구할지도 명확하게 정리되고(사실 요청할 필요도 없이 백쪽에서 우리 더미데이터를 보고 DB를 짜면 된다),
변수명도 통일되고,
데이터를 전달하기 위해 자바스크립트 문법을 사용하게 된다.
6.2. 리액트 앱를 리액트답게 개발할 수 있게 됐다.
사실 데이터를 받아올 때 굳이 리덕스 같은 상태관리라이브러리를 사용해야되나? 고민 중이었었다. 예발자 프로젝트는 계층적으로 컴포넌트를 렌더링하는 경우가 거의 없었기 때문이었다.
간단하고 단순한 구조의 프로젝트라고 생각해왔었는데, 사실은 충분히 컴포넌트화 시킬 수 있는 부분을 컴포넌트로 만들지 않았기 때문이었다.
테이블, 리스트, 타임라인 등 중복되는 내용을 정리/비교하는 요소가 많은 예발자닷컴 같은 웹 페이지는 오히려 컴포넌트가 계층적으로 만들어질 여지가 큰 프로젝트다.
아무리 단순한 코드라도 재사용성이 보이는 코드는 무조건 컴포넌트화 시키자!
특히
ol,li같은 리스트 태그들. 무조건 컴포넌트가 될 녀석들이다.
Last updated
Was this helpful?