[React] 상수 데이터

⚡️ 상수 데이터란?

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

 

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

반복되는 UI를 하드코딩으로 일일이 만들어두게 되면 코드가 길어져서 가독성에 좋지 않고

수정이 필요할 시 해당하는 부분을 찾기 힘들어 유지보수가 어렵다는 문제가 있습니다.

하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있습니다.

이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return하는 JSX 부분만,

내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 또한 용이해집니다.

 

⚡️ 상수 데이터 활용 전

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;

 

⚡️ 상수 데이터 활용

1. 선언한 상수 데이터와 map 메서드를 활용해 실제 코드에 적용

// 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;

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. map 메서드에서 return하는 javascript를 컴포넌트화하고, props로 넘겨주는 방식으로도 활용

// 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;

 

⚡️ 선언 위치

1. 컴포넌트 파일 내부에서 선언

   ⓵ 상수 데이터가 해당 컴포넌트 내에서만 사용되고 가독성을 해치지 않는다면, 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용 

   ⓶ 컴포넌트의 state나 props 등, 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성

   ⓷ 컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

// 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;

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. 별도 파일로 분리

    ⓵ 상수 데이터가 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 공통적으로 사용되는 경우

    ⓶ 상수 데이터의 길이가 너무 길어서 가독성을 해치는 경우

// 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;

 

⚡️ Summary

1. 상수 데이터란 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터입니다.
2. 반복되는 UI 구조는 상수 데이터와 map 메서드를 활용해 간결하게 표현할 수 있습니다.
3. 상수 데이터를 활용하면 UI를 효율적으로, 확장성 있게 구성할 수 있으며 유지보수가 용이합니다.
4. 상수 데이터는 컴포넌트 파일 내부에서 선언하거나, 별도의 파일로 분리해서 사용할 수 있습니다.