1. 상수 데이터란?

1-1 상수 데이터 정의

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터가 있다. 아래 이미지를 참고하면 github footer부분인데 UI의 구성에는 필요하지만 고정적인 데이터이기 때문에 백엔드 API에서 가져올 필요가 없다. 이러한 변하지 않는 정적인 데이터를 상수 데이터라 한다.

1-2 상수 데이터를 사용하는 이유

그렇다면 상수 데이터를 왜 사용하는것일까? 반복되는 ui를 일일이 하드코딩을 하다보면 가독성이 떨어지고 이러한 이유때문에 직접 찾아가 수정하기 어려운 부분이 있어 유지보수에 좋지않기 때문에 상수데이터를 사용한다.

2. 상수 데이터 사용방법

2-1 상수 데이터 선언

아래의 이미지 github footer 부분을 상수데이터로 만들어보자. 우선 배열안의 객체형대로 만들어 주면되는데, 이 작성된 상수데이터를 jsx에서 들어갈부분에 map메서드를 이용하여 출력을 해줄것이다. 상수 데이터임을 나타내기 위해서 변수명은 UPPER_SNAKE_CASE naming convention에 따라 작성한다.

const FOOTER_INFO_LIST = [
 { id: 1, link: 'https://github.com/terms', text: 'Terms' },
 { id: 2, link: 'https://github.com/privacy', text: 'Privacy' },
 ...
 { id: 11, link: 'https://github.com/about', text: 'About' },
];

2-2 JSX에 적용

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* ... 생략... */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <li key={info.id}>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

map메서드를 이용하여 상수데이터를 반환할 예정이고 상수데이터에 있는 데이터들을 각각의 위치에 맞게 적용 해 주었다.

2-3 상수 데이터의 선언위치

상수데이터의 선언위치는 컴포넌트 내부에 선언 할 수 있는데 이경우 컴포넌트 내부 가장 하단에 작성해주면 된다. 다른 방법으로는 컴포넌트를 따로 만들어 선언 할 수 있는데, 이런 경우는 내용이 길어 가독성을 해치는 경우 따로 만들어 관리를 해준다. 이렇게 따로 컴포넌트를 만들어 데이터를 받아올땐 props로 받아오는 방식으로 사용이 가능하다.

// 컴포넌트 내부에 상수 데이터를 작성하는 경우

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <FooterInfo key={info.id} link={info.link} text={info.text} />
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

const FOOTER_INFO_LIST = [
  { id: 1, link: 'https://github.com/terms', text: 'Terms' },
  { id: 2, link: 'https://github.com/privacy', text: 'Privacy' },
  ...
  { id: 11, link: 'https://github.com/about', text: 'About' },
];

컴포넌트 내부에 선언하는경우 이렇게 가장 하단에 작성해주면 된다.

// 컴포넌트로 따로 상수데이터를 관리하는경우

import React from 'react';
import { FOOTER_INFO_LIST } from './data';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <li key={info.id}>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

상수 데이터가 선언되있는 해당 컴포넌트를 import해준 후 props로 데이터를 받아와 준다.