React - 상수데이터, Mock Data

Moolbum·2021년 11월 25일

Map React mock data 상수데이터

React

목록 보기

5/23

상수데이터 👨‍💻

상수데이터란 변하지 않는 데이터, UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터

1️⃣ 상수데이터를 사용하는 이유

반복적인 구조가 보일 때 달라지는 부분들의 데이터를 배열형태로 분리시켜
map 함수를 사용해 유지보수를 더 쉽게 할 수 있게 한다.

map 함수는 기존배열의 length만큼 반복하며 인자를 받아 새로운 배열을 만드는 메서드이다.

상수데이터
export const STORY_DATA = [
  {
    id: 1,
    src: 'images/yongwoo/recommend_01.jpeg',
    alt: '추천1',
    userName: 'jomingi62',
    follow: 'dlfjwk11003님이 팔로우합니다',
  },
  {
    id: 2,
    src: 'images/yongwoo/recommend_02.jpeg',
    alt: '추천2',
    userName: 'jomingi62',
    follow: 'dlfjwk11003님이 팔로우합니다',
  },
  {
    id: 3,
    src: 'images/yongwoo/recommend_03.jpeg',
    alt: '추천3',
    userName: '_jia73',
    follow: '회원님을 팔로우합니다',
  }
  .
  .
  .
];

상수데이터 불러오기
import { STORY_DATA } from '../RecommendContainer/Information/InformationList';

map 함수 사용
{STORY_DATA.map((user, id) => {
 return (
 <div className="recommendWrap" key={user.id}>
    <div className="recommend">
     <img className="recommendPhoto" src={user.src} alt={user.alt} />
       <div className="recommendText">
         <h4>{user.userName}</h4>
         <p>{user.follow}</p>
       </div>
    </div>
<div className="follow">팔로우</div>
);
})}

반복적인 UI구성 때 내가 원하는 데이터만 바꿔 줄 수 있다!

2️⃣ 상수데이터 이름명

상수데이터의 이름명은 대문자로 적고 스네이크 케이스를 하는것이 일반적이다.
이 데이터가 반복적으로 쓰이는 상수데이터인지 바로 인지 할 수 있도록 가독성을 높이기 위해서다!

ex) STORY_DATA

3️⃣ 상수데이터 파일위치

상수데이터 파일위치는 데이터를 받는 컴포넌트 파일위치에 동일선상에 두는게 좋다. 상수데이터파일 / 컴포넌트는 꼭 구분해서 생성!!!

4️⃣ key 값 부여

React에서 map함수를 사용하기 위해선 고유의 key 값을 부여해줘야합니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정 합니다!

export const STORY_DATA = [
  {
//////id라는 key값을 부여////////
    id: 1,
    src: 'images/yongwoo/recommend_01.jpeg',
    alt: '추천1',
    userName: 'jomingi62',
    follow: 'dlfjwk11003님이 팔로우합니다',
  },
  .
  .
  .
 ]