상수 데이터

개발을 할 때, UI 구성에 필요한 데이터가 정적이라면 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다.

서버에서 받아야 하는 값이고, 아직 백엔드에서 넘겨줄 데이터를 완성하지 않았다면 서버에서 받을 값을 예상해서 개발을
진행할 수 있어야 한다.

이 때, UI를 표시하기 위한 상수 데이터 와 백엔드의 데이터를 모방하기 위한 mock data 를 사용해보자.

---

상수 데이터

• UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 정적인 데이터 => 상수 데이터로!

---

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

• 반복되는 UI를 유지보수하기 쉽고, 가독성을 높이기 위해.
• 반복되는 UI = 상수 데이터 + Array.map() 를 이용해서 간결하게 표현
  • 수정 필요시, 상수 데이터의 해당 부분만 변경해주면 유지보수 용이

---

사용 방법

사용
상수 데이터는 별도의 JS파일로 분리하거나, 필요한 파일 내부에서 선언별도의 JS파일로 분리할 경우

export / import를 통해서 필요한 파일에서 사용
JS파일은 데이터를 import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성

• 변하지 않는 상수 데이터라는 것을 표시해주기 위해 대문자 + snake case 사용상수 데이터를 사용하기 전의 모습

컴포넌트가 반복되면서 가독성도 떨어지고 내용 변경 시 많은 부분을 일일이 수정해야 하는 모습을 볼 수 있다.

상수 데이터를 사용하기 전!

---

상수 데이터를 사용한 모습

상수 데이터를 사용한 모습

상수 데이터를 담는 별도의 파일을 만들고, 그 안의 상수 데이터를 선언
상수 데이터 + Array.map() 를 사용하여 상수 데이터를 사용하여 COMMENT_LIST의 배열 안에 들어가 있는 요소의 개수만큼 Comment라는 컴포넌트를 만들어냈다.
내용이 변경되어야한다면 COMMENT_LIST 에서 내용을 수정하고 댓글을 추가하고 싶은 경우에는 배열 안에 요소를 더 추가하면 된다.

 

---

파일 내부에서 상수 데이터 선언

파일 내부에서 상수데이터를 선언하고 바로 적용하는 모습이다.

---

상수 데이터를 써보자!

상수 데이터는 UI 구성에는 필요하지만 변할 필요가 없는 정적인 데이터이다.
내가 생각하는 상수데이터가 쓰일 조건은 다음과 같다.

• 백엔드 API에서 가져오지 않아도 되는 데이터인가?
• 반복된 UI구조에서 사용해야 하는가?

위의 조건에 충족한다면 상수 데이터로 사용해 유지보수성을 높이는 것이 좋지 않을까 싶다.