프론트엔드의 역할은 어디까지? - 더미데이터 만들기

이대현·2020년 7월 26일

JavaScript Map Props React State component next.js redux 예발자닷컴

예발자닷컴 개발 기록

목록 보기

4/8

1. 목표

예발자닷컴 코드 리팩토링하기
- 더미데이터 배열 만든 뒤 TimelineListItem 컴포넌트에 각각 다른 데이터 넣기.

2. 현재 컴포넌트 구조

TimelineList
- TimelineListItem
  - Title : "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의 내용을 data state의 값들로 바꿔주었다.
아직 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 같은 리스트 태그들. 무조건 컴포넌트가 될 녀석들이다.