데이터

✅ 상수데이터

UI구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등 을 통해 가져올 필요가 없는 데이터들이다. 이런 데이터들은 상수 데이터로 만들어 UI를 구성할 수 있다. 즉 상수 데이터란 정적인 데이터를 의미한다.

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

첫번째로는 하드코딩으로 만들게 되면 코드가 길어져 가독성에 좋지 않고, 수정 이 필요할 시 해당 부분을 찾기 힘들어 유지보수가 어렵다.

상수데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있다. 상수데이터 부분만 수정해주면 되기 때문에 유지보수 또한 용이하다.

👉 상수데이터 활용

map메서드를 활용해 동일한 UI를 반복할 것이기 때문에 상수데이터의 형태는 배열로 만든다.

export const ASIDE_LIST = [
  { id: 1, title: '소개' },
  { id: 2, title: '도움말' },
  { id: 3, title: '홍보 센터' },
];

function AsideList() {
  return (
    <div id="listWrap">
      {ASIDE_LIST.map(info => {
        return (
          <>
            <div id="list" key={info.id}>
              {info.title}
            </div>
            <span id="dot">⋅</span>
          </>
        );
      })}
    </div>
  );
}

✍️ 선언위치

1. 컴포넌트 파일 내부에서 선언
   상수데이터가 해당 컴포넌트 내에서만 사용되고 가독성을 해치지 않는다면, 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용한다. 상수 데이터의 구성에 따라 다음과 같이 다른 위치에 작성한다.

• 컴포넌트의 state나 props 등 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성
• 컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당할 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

2. 별도 파일로 분리
   공통적으로 사용되는 경우나 데이터의 길이가 길어 가독성을 해치는 경우 .js파일로 분리해서 사용할 수 있다.

---

✅ Mock 데이터

UI구성에 필요한 백엔드 API가 완성되지 않은 상황에서 데이터가 들어올 상황을 대비해 의도한대로 UI가 구현되는지 Mock데이터를 입력해 확인 할 수 있다.
즉, 실제로 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터이다.

✍️ mock 데이터를 사용하는 이유

• 백엔드 API가 미완성인 상태에서도 작업에 차질없이 개발 가능하다.
• 백엔드 API의 구성을 미리 맞춰볼 수 있다.
• 실제로 API 통신을 진행할 때 원활하게 할 수 있다.

👉 mock 데이터 활용

1. mock 데이터 생성
   commentLisk.json

[
  {
    "id": 1,
    "commentUserImg": "/images/jinkyung/comment_user_img_1.jpeg",
    "commentName": "hu_zzi",
    "likeCount": 50
  },
  {
    "id": 2,
    "commentUserImg": "/images/jinkyung/comment_user_img_2.jpeg",
    "commentName": "jaerong_e",
    "likeCount": 70
  }
]

• id값을 넣어주는 이유?

2. mock 데이터 호출

function Feeds() {

  //데이터 받아오기
  useEffect(() => {
    fetch('/data/userContentList.json', {
      method: 'GET', 
    })
      .then(res => res.json())
      .then(data => {
        setContent(data);
      });
  });

• fetch함수는 첫번째 인자로 http요청을 보낼 때 API주소 / 두번째 인자로 요청을 보낼때의 옵션들을 객체로 받는다.
• json파일을 저장해 둔 주소를 API주소로, 그리고 데이터를 가져오기 위한 GETmethod를 활용해 요청을 보낸다.
• 데이터를 요청하는 시점은 useEffect 훅을 활용하여 컴포넌트가 렌더링 된 이후 데이터를 요청한다.