React- 상수 데이터

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

상수 데이터를 사용하는 이유

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

상수 데이터 활용 / 선언

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

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

상수데이터 적용

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>
  );
};

선언한 상수 데이터와 map 메서드를 활용해 실제 코드에 적용한 모습이다. 활용 전의 예시와 비교했을때, Footer 컴포넌트가 훨씬 간결해지고 유지보수도 좋다.

상수데이터 선언 위치

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

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

• 컴포넌트의 state 나 props 등, 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성
  컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

  
  
  

  정리

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