상수데이터란?

-> 변하지 않는 데이터 (정적인 데이터)
-> UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API를 통해서 가져올 필요가 없는 정적인 데이터들을 만들 UI를 효율적으로 구성

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

1. 반복되는 UI를 하드코딩으로 일일이 만들어 두게 되면,
   코드가 길어져서 가독성이 좋지않기 때문에
   2.수정이 필요할 때 해당하는 부분을 찾기 힘들어 유지보수가 힘들다.
   -> 그래서 수정 할 필요가 생겼을 경우, 상수 데이터에서 해당하는 부분의 내용만 변경해주면, 유지보수에 용이하다.

   상수데이터는 대문자 + 스네이크 케이스로 표기해줌 - 위코드 컨벤션

   const INFO_DATA = [];

• 이후 반복되는 부분을 틀로 만들어 놓고, 그 안에 바뀌는 데이터들만 넣어준다.

• 같은 틀 안에서 달라지는 값만 객체안에 넣어준다.

• id 값을 꼭 넣어야 하는데 map 메소드 사용 시 이 배열 내부의 각각의 데이터에 대해서 고정된 각각 다른 unique한 key props를 부여하기 위해서 아이디를 준다.

  const INFO_DATA = [
  {id:0,link:"https://naver.com/",text:"안녕" },
  {id:1,link:"https://naver.com/",text:"잘가" },
  {id:2,link:"https://naver.com/",text:"고마워" },
  {id:3,link:"https://naver.com/",text:"최고" },
  {id:4,link:"https://naver.com/",text:"즐거워" },
  {id:5,link:"https://naver.com/",text:"사랑해" },
  ]
  <ul>
  INFO_DATA.map(el => {
  return (
  <li key={el.id} className="ex">
     <a href={el.link}>{el.text}</a>
  </li>
  )
  })
  </ul>
  

상수데이터는 파일을 따로 만들어서 보관이 가능하다.

1. 파일을 만들고 export default 해준다.
2. 사용할 곳에 import 해서 사용이 가능.

굳이 상수데이터를 다른 파일로 빼서 관리하는 이유

1. 가독성 및 유지보수의 용이
2. 데이터를 재활용할 때 용이하게 사용가능하다
   -> 다른 파일에서도 데이터를 동일하게 사용가능
   -> 예를들면 API주소 등을 Config.js 파일을 만든 후 그 안에 API주소를 상수 데이터로 만들어 각각 필요한 파일에서
   IMPORT해서 사용이 가능하다.