Data의 활용

상수 데이터

• 변하지 않는 정적인 데이터를 의미
• 반복되는 UI를 구성하지만 변하지 않는 값들은 상수 데이터로 만들어 UI를 효율적으로 구성하고 관리할 수 있다.
• 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있다.
• 이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return하는 JSX 부분만, 내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 또한 용이해진다.
• 상수데이터의 변수명의 경우 convention으로 대문자로 작성하는것이 일반적이다.

const FOOTER_INFO_LIST = [
  { id: 1, link: 'https://about.instagram.com/', text: '소개', next: '·' },
  { id: 2, link: 'https://help.instagram.com/', text: '도움말', next: '·' },
  {
    id: 3,
    link: 'https://about.instagram.com/blog',
    text: '홍보 센터',
    next: '·',
  },
  {
    id: 4,
    link: 'https://developers.facebook.com/docs/instagram',
    text: 'API',
  },
  {
    id: 5,
    link: 'https://about.instagram.com/about-us/careers',
    text: '채용 정보',
    next: '·',
  },
  {
    id: 6,
    link: 'https://privacycenter.instagram.com/policy/?entry_point=ig_help_center_data_policy_redirect',
    text: '개인정보처리방침',
    next: '·',
  },
  {
    id: 7,
    link: 'https://help.instagram.com/581066165581870/',
    text: '약관',
    next: '·',
  },
  {
    id: 8,
    link: 'https://www.instagram.com/explore/locations/',
    text: '위치',
    next: '·',
  },
  {
    id: 9,
    link: '#',
    text: '위치',
    next: '',
  },
];

다음과 같이 상수 데이터를 선언하고 아래와같이 활용할 수 있다.

{FOOTER_INFO_LIST.map(infoList => {
              return (
                <li key={infoList.id}>
                  <a href={infoList.link}>{infoList.text}</a>
                  <span>{infoList.next}</span>
                </li>
              );
            })}

Mock Data

• 프론트엔드 개발자가 필요에 의해 샘플로 만든 보조 데이터
• 백엔드 API가 미완성 이라도 끊김없는 개발 진행 가능
• API 완성된 이후에는 기존의 Mock Data에서 실제 API로 원활한 수정 가능
• 실제 API를 요청하듯 Mock Data는 컴포넌트에서 시점에 따라 fetch 메서드를 호출해서 활용
• 컴포넌트가 마운트 됐을때, 혹은 특정 버튼이나 이벤트에 등록시켜서 사용
• Public 폴더 하위의 data 폴더에서 관리
• mock data파일의 확장자는 json으로 관리한다.

Fetch

fetch(“/data/파일명.json”).then(response=>response.json()).then(result=>setState(result));

• Mock Data는 실제 데이터와 동일하게 fetch 메서드에서 호출한다ㅏ.
• fetch 메서드의 첫 번째 인자로 http 요청을 보낼 API 주소를 받는데, 여기에 우리가 생성한 Mock Data의 주소를 입력한다. http://localhost:3000 은 생략이 가능하며 생략 안하고 사용 시, 로컬 서버가 여러개 열려있다면 새로운 로컬 서버를 실행할 때마다 포트번호가 3001, 3002와 같이 바뀔 텐데 그때마다 일일이 수정해야 한다. 그렇기 때문에 특별한 이유가 없는 한 생략하는 게 좋다.
• 두 번째 인자는 요청을 보낼 때의 옵션 객체를 전달하는 부분입니다. 예시의 경우 서버로부터 데이터를 받아오는 GET 요청이기 때문에 method 옵션에 GET이라고 명시해주었습니다(method가 GET인 경우 생략 가능).

fetch('/data/recommendData.json', {
  method: 'GET'
})
  .then(res => res.json())
  .then(data => {
    setProductList(data);
  });

• useEffect hook을 통해 컴포넌트가 마운트(최초로 화면에 그려짐)된 후 한 번만 데이터를 받아오도록 합니다.
• fetch 메서드는 반드시 useEffect와 함께 사용해야만 하는 것은 아니다. 데이터를 불러올 시점에 따라 사용 방식이 다르며, 특정 버튼을 클릭했을 때 데이터를 호출하고 싶다면 버튼의 onClick 이벤트에서 호출되는 함수에 fetch 메서드를 사용하는 방식으로 구현할 수 있다.