Array.map

배열값에 .map 메서드를 이용하여 배열안에 데이터 모두를 넣어 반환을 해줌

import React from "react";

export default function Ex() {
  const arr = 
	[{id:1, text:"Hello"},
	 {id:2, text:"안녕"},
	 {id:3, text:"NI HAO"}
	 {id:4, text:"bon jour"}];
  return (
    <div className="hello">
      <ol>
        {arr.map(ele => {
          return <li>{ele.text}</li>;
        })}
      </ol>
    </div>
  );
}

반환값:
1.Hello
2.안녕
3.NI HAO
4.bon jour

ol안에 데이터가 잘 담긴다!

map에 key값을 부여하는이유

 {arr.map((ele,idx) => {
	  return <li key={(ele.id)or(idx)}>
		{ele.text}</li>;
	})}

위에와 같은 내용이지만 ((idx) or (ele.id))를 넣어주었다.

• 키를 부여하는 이유

  

  출처 : https://react.vlpt.us/basic/11-render-array.html

  이런식으로 키가없다면 배열중 a를 제거하게 된다면 ,

  a >> b, b >> z 이런식으로 변경되다가 d가 제거됨

  매우 비효율 적으로 렌더링이 되고있다.

  

  출처 : https://react.vlpt.us/basic/11-render-array.html

  하지만 키값을 주게 된다면 기존의 값을 그대로 두고 원하는곳에 내용을 삽입 할 수 있다.
  

• idx 대신 ele.id가 선호 되는이유

  idx를 이용하여 키 값을 줄 수 는있지만 고유 값이 아니기때문에 댓글 기능 같은 곳에서는 댓글이 삭제될 경우 꼬일 수 가있음.
  

상수 데이터 선언 방식

• Snake 표현식을 이용한다
  FOOTER_DATA,HEADER_DATA 등등
• 함수 밖 제일 아래에서 선언함.
• 따로 파일을 만들어 관리하려면 똑같이 js파일을 만들고,
  export,import 해주면됨.

mock data

• mockdata 란?
  • 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터.
• mockdata를 사용하는이유
  • 백엔드와 프론트엔드가 개발을 진행하는 중 필요한 백엔드API가 완성이 안되어 있을때, 무작정 기다리는것이 아닌 가상의 데이터를 만들어 데이터가 맞게 들어오는지 UI가 잘 구현되는지 확인해야한다.
• mockdata 만들기

  1. React 폴더 내에 data 폴더에 .json 형식의 데이터를 만듬.
     (내용은 배열형식으로 만듬, 배열안에 객체 들어갈 수 있음.)

  2. 데이터를 가져오고 싶은 파일에서 함수식 밑에 fetch(),then(),then() 을 써줘야한다.

     function Example () {
     	fetch( “데이터를 가져올 주소”,{ method : “GET”})
     	// 데이터를 가져올 주소의 기본값 : 'data/로 시작함.
     	.then(res => res.json)
     	// 이 과정은 컴퓨터만 읽을수있는 문자를 우리가 
     	// 볼 수 있도록 인코딩 해준다고 생각하면됨.
     	.then((data) => {
     	console.log(data);
     	//데이터를 콘솔에 띄워줌.
     	});  
     }

• useEffect와 fetch를 이용하여 첫번째 렌더링 에서만
  데이터 가져오기
  

렌더링 될때마다 백엔드에서 데이터를 갖고 오게되면 비효율적이고 처음 렌더링 할때만 하고싶다면 useEffect를 사용해야한다.

  import React,{useEffect} from 'react';
  
  const Example = () => {
  	useEffect( () => {
  		fetch('data/...주소.json')
  		// 해당 주소에서 데이터를 가져옴.
  			.then((res) => res.json())
  		// 가져온 파일 형식을 우리가 읽을 수 있도록 렌더링.
  			.then((data) => {
  				console.log(data);
  		// 렌더링된 데이터를 콘솔에 띄워줌.
  			}
  	},[])
  }

• 받아온 데이터를 콘솔에만 띄우면 적용을 할 수 가없기 때문에 데이터를 저장해주어야한다.

  • 저장하는방법은 State를 사용해야한다!

  import React,{useEffect} from 'react';
  
  const Example = () => {
  	const [mainData, setMainData] = useState([]);
  	useEffect( () => {
  		fetch('data/...주소.json')
  		// 해당 주소에서 데이터를 가져옴.
  			.then((res) => res.json())
  		// 가져온 파일 형식을 우리가 읽을 수 있도록 렌더링.
  			.then((data) => {
  				setMainData(data)
  		// 렌더링된 데이터를 mainData에 적용시켜줌.
  			}
  	},[])
  }

• 주의할점
  - 자바스크립트는 동기적 언어이기 때문에 위에서 아래로 렌더링을 하게된다, useEffect를 사용해 데이터를 받게되면 후순위에 데이터를 받게되는데, 후순위로 밀리기전에 return 값에 쓴 map 메서드가 실행되는데 map은 배열값에만 작동하기 때문에 꼭 useState 기본값으로 을 주어야 에러가 나지않는다!!