목표

1. Array.map() 함수를 통해 컴포넌트를 재사용 할 수있다.
2. 목데이터를 만들어 백엔드 api미완성상태에서도 차질없이 개발할수있따.
3. 컴디마 멯소드에서 fetch함수로 목데이터를 가져올수있다.
4. 상수 데이터를 js로 만드는 경우와 목데이터를 json으로 만드는 경우를 구분하여 설명할 수있다.

map으로 관리할것이기 때문에 배열로 작성.
상수 데이터 컨벤션

• 대문자 카멜 스네이크 케이스
  *) const INFO_LIST = []

const INFO_LIST = [
  { id:0,  content:"소개" },
  { id:1,  content:"도움말"},
  { id:2,  content:"홍보 센터"},
  { id:3,  content:"개인정보"},
  { id:4,  content:"해시태그
  { id:5,  content:"언어}, 
];

{INFO_LIST.map((listData, idx)=>{
	return( 	//return이 반드시 있어야한다.
   <li key={idx} className="moreInfo">
     <a href={listData.link}>{listData.content}</a> //js 문법을 쓰기위해 {}사용
   </li>
   );
 

// key값으로 idx로 줄수도 있지만 각각의 객체들안에 id:0,1,2처럼 부여된것을 이용할수도 있다.
// key={listData.id} <-- 순서가 중요한 경우(장바구니안에 여러개가 있을 때 랜덤으로 몇개를 선택해서 삭제하는경우)
})}

js로 가져오기

위와 같은 상수데이터는 다른 파일에 따로 빼서 export, import로 사용해줄 수있다.

json으로 데이터 가져오기

javascript object notation
key: value로 이뤄진 객체형태
백엔드와 통신을 위해 사용되는 데이터 형태.

화면에 나타나는게 mount
화면에 그려진 직후 딱 한번 실행하라: componentDidMount

순서

constructor > render > 컴디마(this.setState있으면) render 또다시.