상수데이터

페이지를 구성하다 보면 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>