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

1. 상수 데이터의 정의

1-1. 상수 데이터란?

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

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

• 반복적인 UI를 하드코딩으로 일일이 만들어두게 되면 코드가 길어져서 가독성에 좋지 않고, 수정이 필요할 시 해당하는 부분을 찾기가 힘들어서 유지보수가 어렵습니다.
• 하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있습니다.
• 이후 수정이 필요해지면 레이아웃은 map 메서드에서 return 하는 JSX 부분만, 내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 또한 용이해집니다.

2. 상수 데이터의 활용

2-1. 상수 데이터의 활용 전

import React from 'react';

const Footer = () => {
  return (
    <footer>
			{/* 생략 */}
      <ul>
        <li>
					<a href="https://github.com/terms">Terms</a>
				</li>
        <li>
					<a href="https://github.com/privacy">Privacy</a>
				</li>

				...

        <li>
					<a href="https://github.com/about">About</a>
				</li>
      </ul>
    </footer>
  );
};

export default Footer;

• 상수 데이터를 활용하기 전의 코드 상태 입니다.
• 동일한 형태의
• 태그를 만들고 개수만큼 붙여넣기 한 다음 내용을 수정하는 방식과 같이 비효율적으로 UI를 구성하게 됩니다.
• 이렇게 코드를 작성하면 특정 요소의 텍스트 내용이나 주소가 바뀌거나 태그의 구조가 바뀌면 일일이 찾아서 수정해주어야 한다는 불편함이 있습니다.

2-2. 상수 데이터의 활용

2-2-1. 상수 데이터의 선언

• 중복되는 코드를 기반으로 상수 데이터를 만들 때는 우선 바뀌어 들어갈 부분을 찾아야 합니다.
  map 메서드를 활용해 동일한 UI를 반복할 것이기 때문에, 상수 데이터의 형태는 배열로 만들어줍니다.
• 배열 안의 요소의 개수와 값은 처음에 파악했던 바뀌어 들어갈 부분을 기반으로 구성합니다.
• 이 때, 상수 데이터임을 나타내기 위해 변수명은 UPPER_SNAKE_CASE 네이밍 컨밴션에 따라 명명합니다.

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-2. 상수 데이터 적용하기

// Footer.js

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 메서드를 활요해서 실제 코드에 적용한 모습입니다.
• 활용 전과 비교해보면 컴포넌트가 훨씬 간결해진 것을 확인할 수 있습니다.

// Footer.js

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;

-위 코드 처럼 map 메서드에서 return 하는 JSX를 컴포넌트화하고, props로 넘겨주는 방식으로도 활용할 수 있습니다.

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

• 상수 데이터는 컴포넌트 파일 내부에 선언해서 사용할 수도 있고, 별도의 .js 파일로 분리해서 사용할 수도 있습니다.

2-3-1. 컴포넌트 파일 내부에 선언하기

• 상수 데이터가 해당 컴포넌트 안에서만 사용되고 가독성을 해치지 않는다면, 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용합니다.
• 컴포넌트의 state나 props 등, 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트의 내부에서 작성
• 컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

2-3-2. 별도 파일로 분리하기

• 상수 데이터가 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 공통적으로 사용되는 경우, 혹은 상수데이터의 길이가 너무 길어서 가독성을 해치는 경우에는 다음 예시처럼 별도의 .js 파일로 분리해서 사용할 수 있습니다.

// data.js

export 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" },
];

• 해당 파일에서 export한 상수 데이터를 사용할 컴포넌트에서 import 하여 사용합니다.

// Footer.js

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;