React - 상수데이터

• 이름 그대로 변하지 않는 데이터. 즉, 정적인 데이터
• UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있습니다.
• 상수데이터같은 경우에는 여러 컴포넌트에서 동시에 사용하는 데이터라면 별도 파일로 분리하거나,이 컴포넌트 안에서만 사용하는 데이터라면 컴포넌트 하단에 작성해줍니다.
  
  

<div className="category">
            <ul className="categoryList">
              {FOOTER_INFO_LIST.map(category => {
                return (
                  <Category key={category.id} content={category.content} />
                );
              })}
            </ul>
          </div>

const FOOTER_INFO_LIST = [
  {
    id: 1,
    content: 'Character',
  },
  {
    id: 2,
    content: 'Parks',
  },
  {
    id: 3,
    content: 'Disney',
  },
  {
    id: 4,
    content: 'Pixar',
  },
  {
    id: 5,
    content: 'Star Wars',
  },
  {
    id: 6,
    content: 'Marvel',
  },
  {
    id: 7,
    content: 'National Geographic',
  },
];

import React from 'react';
import './Footer.scss';
import './Category.scss';

const Category = ({ id, content }) => {
  return (
    <div className="category">
      <li key={id} className="content">
        {content}
      </li>
    </div>
  );
};

export default Category;