페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 Backend api
등 을 통해 가져올 필요가 없는 데이터를 의미합니다.
예를 들어 우리의 나이, 몸무게, 식성 같은 경우는 시간이 지나면 조금씩 변하지만 이름, 주민등록번호, 같은 것들은 시간이 지나도 변하지 않습니다. 이런 것 들을 상수데이터
라고 합니다.
📌상수데이터를 사용하는 이유
- 반복되는 UI를 하드코딩으로 일일이 만들면 코드가 길어져 가독성과 수정이 필요할 때 유지 보수가 어렵다.
- 상수 데이터를 활용하면
Array.map()
메서드와 조합해서 반복되는 UI를 보다 간결하게 표현 할 수 있다.- 수정이 필요한 경우 map 메서드에서 return 하는
JSX
부분만 내용을 수정해주면 되기 때문에 유지보수가 용이해진다.
⚠️주의해야 할 점
- 상수 데이터는 컴포넌트 파일 내부에 선언할 수 있고, 별도의 JS파일로 분리해서 사용할 수도 있다.
- 컴포넌트의
state
나props
등, 컴포넌트의 리 렌더링 시 변하는 값을 포함하는 상수데이터는 컴포넌트 내부에서 작성한다- 컴포넌트가 리 렌더링 될 떄 마다 새로 선언되고, 할당 될 필요가 없는 상수 데이터는 컴포넌트 외부에 작성한다.
- 상수데이터의 이름은 전부 대문자로 한다.
export const FOOTER_LIST = [
{ id: 1, footerName: "소개" },
{ id: 2, footerName: ". 도움말" },
{ id: 3, footerName: ". 홍보 센터" },
{ id: 4, footerName: ". API" },
{ id: 5, footerName: ". 채용 정보" },
{ id: 6, footerName: ". 개인정보처리방침" },
{ id: 7, footerName: ". 약관" },
{ id: 8, footerName: ". 위치" },
{ id: 9, footerName: ". 인기 계정" },
{ id: 10, footerName: ". 해시태그" },
{ id: 11, footerName: ". 언어" },
{ id: 12, footerName: "© 2022 INSTAGRAM FROM META" },
];
<ul className="main-right-footer">
{FOOTER_LIST.map(footerList => {
return <li key={footerList.id}>{footerList.footerName}</li>;
})}
</ul>