상수 데이터
변하지 않는 데이터, 정적인 데이터를 말한다
UI구성에 필요하지만 동적으로 변하지 않아서
→ 백엔드 API를 통해서 가져올 필요가 없는 정적인 데이터를 상수 데이터로 만들어
→ UI를 효율적으로 구성할 수 있디
상수 데이터를 사용하는 이유
반복되는 UI를 하드코딩으로 일일이 만들어주게 되면
→ 코드가 길어져서 가독성이 좋지 않고,
수정이 필요하면 해당하는 부분을 찾기 힘들어서 추후 유지보수가 힘들어진다
- 간결한 표현 → 가독성 좋아짐 : 반복되는 UI를 상수데이터 +
Array.map()메소드의 조합 - 유지보수 편해짐 : 추후에 수정하려고 할 때에는 → 상수 데이터에 해당하는 부분의 내용만 변경하면 된다
상수 데이터 활용
변화하지 않는 정적인 값인 댓글이라고 가정한다
정적인 여러 개의 댓글을 렌더링하기 위해서 → 댓글의 내용을 상수 데이터로 표시한다
상수 데이터 : 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용가능
별도의 JS 파일로 분리할 때에는, export / import를 통해서 필요한 파일에서 사용한다
JS파일의 위치 : 접근하기 쉽게 데이터를 import 하는 컴포넌트의 바로 옆으로 지정한다
이 변수가 명백히 변하지 않는 상수 데이터라는 것을 표시하기 위해서
대문자 + snake-case를 이용해서 변수의 이름을 짓는 컨벤션이 있다
상수 데이터를 사용하지 않는 경우
CommentList.js 코드
import React, {Component} from "react";
import Comment from "./Comment/Comment";
import "./CommentList.scss";
class CommentList extends Component {
render() {
return (
<div className="CommentList">
<h1>댓글</h1>
<ul>
<Comment
name="wecode"
comment="Welcome to world best coding bootcamp"
isLiked={true}/>
<Comment name="joonsikyang" comment="Hi therer." isLiked={false}/>
<Comment name="jayPark" comment="Hey." isLiked={false}/>
</ul>
</div>
);
}
}
export default CommentList;<Component>라는 컴포넌트가 반복적으로 사용되고 있는 부분을 하드코딩으로 처리한다- 추후 댓글의 내용이 변경되야 하면 → 해당하는
comment를 찾아서 props에 할당된 값을 다시 수정해야 하고 - 컴포넌트에 코멘트 말고도 더 많은 내용이 들어가게 된다면 → 컴포넌트 자체가 길어져서 가독성이 좋아지지 않는다
- 댓글을 4개, 5개로 만들어주고 싶다면 다시
<Comment>을 추가하고name, comment, isLinked와 같인 props를 일일이 할당해줘야 한다
상수 데이터 사용하는 경우
commentData.js 코드
const COMMENT_LIST = [
{
id: 1,
userName: 'wecode',
content: 'Welcome to world best coding bootcamp!',
isLiked: true
}, {
id: 2,
userName: 'joonsikyang',
content: 'Hi there.',
isLiked: false
}, {
id: 3,
userName: 'jayPark',
content: 'Hey.',
isLiked: false
}
];
export default COMMENT_LIST;
CommentList.js 코드
import React, {Component} from 'react';
import Comment from './Comment/Comment';
import COMMENT_LIST from './commentData';
import './CommentList.scss';
class CommentList extends Component {
render() {
return (
<div className="CommentList">
<h1>댓글</h1>
<ul>
{
COMMENT_LIST.map(comment => {
return (
<Comment key={comment.id} name={comment.userName} comment={comment.content}/>
);
})
}
</ul>
</div>
);
}
}
export default CommentList;
코드 설명
-
commentData.js 라는 별도의 파일을 만들고
그 안에 COMMENT_LIST 라는 상수 데이터를 선언한다 -
CommentList.js 에서 COMMENT_LIST 를 import한 다음
Array.map()메소드를 이용해서 Comment를 렌더링한다 -
CommentList 컴포넌트의 내용이 짧아지고
Array.map()메소드를 이용해서 → COMMENT_LIST 라는 배열 안에 들어가있는 요소의 개수만큼
Comment 라는 컴포넌트를 만들어낸다는 목적도 더 명확하다
import COMMENT_LIST from './commentData';
(...)
COMMENT_LIST.map(comment => {
return (
<Comment key={comment.id} name={comment.userName} comment={comment.content}/>
);
})-
댓글 내용이 변경되야 하는 경우 → COMMENT_LIST 배열 안의 내용을 수정하면 되고
댓글을 4개, 5개로 만들고 싶은 경우 → COMMENT_LIST 배열 안에 하나의 요소를 추가하면 된다 -
상수 데이터의 데이터의 길이가 너무 길거나, 여러 개의 파일에서 공통적으로 사용하는 경우
→ 별도의 JS파일로 분리해서 사용하면 좋고,
해당 파일에서만 사용하는 간단한 상수 데이터의 경우에는 파일 내부에 선언해서 사용하기도 한다
해당 파일에서 제일 중요한 내용은
컴포넌트이기 때문에
중요도의 순서에 따라 컴포넌트를 먼저 선언하고 그 다음에 상수 데이터를 선언한다
동일한 파일 내부에서 상수 데이터를 선언하고 활용하는 코드
import React, {Component} from 'react';
import Comment from './Comment/Comment';
import './CommentList.scss';
// 컴포넌트 선언
class CommentList extends Component {
render() {
return (
<div className="CommentList">
<h1>댓글</h1>
<ul>
{
COMMENT_LIST.map(comment => {
return (
<Comment key={comment.id} name={comment.userName} comment={comment.content}/>
);
})
}
</ul>
</div>
);
}
}
// 상수 데이터 선언
const COMMENT_LIST = [
{
id: 1,
userName: 'wecode',
content: 'Welcome to world best coding bootcamp!',
isLiked: true
}, {
id: 2,
userName: 'joonsikyang',
content: 'Hi there.',
isLiked: false
}, {
id: 3,
userName: 'jayPark',
content: 'Hey.',
isLiked: false
}
];
export default CommentList;상수 데이터의 활용하는 경우 (예시)
위 사진 처럼 파란색 박스로 표시되는 Footer에 들어가는 값 처럼
반복되는 UI이면서, 변하지 않는 값들의 경우
상수데이터로 만들어서 렌더링하면 → 훨씬 간편하고 유지보수가 편해진다
Mock Data 활용하는 이유
- 우리가 예시로 사용한 댓글은 반복되는 UI이지만, 실시간으로 추가 및 삭제되는 등 변경되는 값이라
- 이러한 정보들은 유저가 우리 페이지에 들어온 순간에
백엔드 API 호출을 통해서 현대 DB에 저장되어있는 댓글 목록을 받아오는 것이 일반적이다- 하지만 백엔드 API 개발이 완료되지 않은 상태라면 → 백엔드 API 통신을 모방할 수 있는
mock data를 활용하면 된다
