상수데이터란?

 

 

 

 

상수데이터

 

:

 

UI 구성에 필요하지만 변하지 않아 백엔드에서 가져올 필요가 없는 데이터로 UI를 확장성 있게 구성할 수 있으며 유지보수가 용이하다

특히 반복되는 구조는 map 함수를 이용해 표현하는데, 이때 상수데이터는 별도의 파일로 분리하기도 한다

 

 

 

 

 

---

 

 

 

 

 

 

변하는 데이터는 변수 데이터

변하지 않는 변수는 상수 데이터

 

리액트는 ui를 그리는 라이브러리이고 ui는 데이터이다.

리액트에서 데이터를 요구하면 서버 변수데이터는 응답하고 리액트는 그것을 jsx로 읽어서 ui로 나타낸다.

 

하지만 변하지 않는 상수데이터를 받을 땐 서버에서 받아올 필요가 없다

컴포넌트에서 상수데이터를 만들면 된다!

 

그렇다면 어떤 것이 상수 데이터일까?

-> 홈페이지 메뉴바 같은 경우는 변하지 않으니 상수 데이터!

 

 

 

❗️ 변하지 않는 구조로 만든 구조가 상수데이터 구조

 

 

 

 

 

 

 

 

이를 코드화해서 보면 👇이렇다

 

 

 

 

 

하지만 이렇게 하드 코딩해서 만들면 메뉴가 수정되거나 링크 주소가 바뀔 때마다 일일이 찾아서 수정해야한다

데이터를 활용하지 못하는 UI 구조

 

 

 

배열 안에는 UI로 그려질 데이터 묶음이 필요해

UI 단위별로 객체로 만들었고

객체마다 id를 부여해서 구분할 수 있게 설계

 

 

이렇게 배열의 형태로 만든 이유 : map 메소드를 이용해 배열의 길이만큼 반복할 거라서! 👇

 

 

 

만들어 놓은 상수데이터를 가지고 map 메서드를 호출하면 반환되는 li 태그!

link 컴포넌트는 배열의 길이만큼 반복해서 그려진다

 

 

이렇게 상수데이터는 각각의 컴포넌트에서 선언할 수도 있고

상수데이터만 모아놓은 파일로 분리해서 관리할 수 있다

 

컴포넌트 내부에는 state, props 다시 랜더될 때 재선언, 재할당되는 변수처럼 변하는 데이터를 선언하고

상수데이터는 변하지 않기 때문에 컴포넌트 밖에 선언한다

 

 

 

👇이렇게!

 

 

다른 컴포넌트에서도 상수데이터가 공통적으로 사용되는 경우나

상수데이터의 길이가 너무 길 경우 필요한 컴포넌트에서 import 하여 사용할 수 있다

 

 

 

 

 

 

js 파일 만들어서 상수데이터 옮긴 후에

그냥 export 만 붙이면 됨! 👇

 

 

 

 

import 만 해주면 됨 👇