[React] map 함수를 익혀보자

리액트를 공부하다보면 map함수를 정말 많이 쓰인다.

Array에 반복문을 돌릴 필요없이, 개별 요소 전체를 원하는 함수식으로 특정한 처리를 해줄 수 있다.

따라서 api를 통해 대량의 json 자료를 출력할때 유용하다.

 

기본적인 구조: 배열.map(콜백함수(요소))

const arry = [1,2,3,4];
arry.map((num) => (num*2) );
// [2, 4, 6, 8]이 출력된다.

-map(콜백함수(요소)) 의 요소명은 원하는대로 지을 수 있으며(보통은 구분하기 쉽도록), arry의 인덱스0부터 끝까지 차례차례 불러와서 해당 콜백함수의 기능에 따라 작업이 이루어진다.

-위의 코드에서 num은 arry의 첫번째 인자 1를 가져오고, 이것을  2로 곱해준다. 그 다음 2를 가져오고 2를 곱하고...

 4를가져오고 2를 곱해줌. 

-map안에 콜백함수는 () => ()와 같은 화살표 함수나, function(){ }와 같은 익명함수 사용 가능

 

리액트에서 map함수는 useState와 useEffect를 사용해서 api의 대량의 json파일 출력이 가능하다!
한가지 예시를 들어보자.

 

  const [coins, setCoins] = useState([]);
  // coins 배열을 useState로 생성
  
  useEffect(() => {
    fetch('https://api.coinpaprika.com/v1/tickers') //json 정보를 가져올 api 주소
      .then((response) => response.json())  // HTTP응답을 .json매서드를 통해 json으로 변환해준다.
      .then((json) => {    //해당 json을 setCoins에 넣어줘 coins의 배열에 담아준다. 
        setCoins(json);
      });
  }, []);
  
   return (
    <div>
      <h1>Coin Price </h1>
      <ul>
        {coins.map((coin) => (
          <li>
            {coin.name} ({coin.symbol}) : ${coin.quotes.USD.price} USD
          </li>
          /*
          coins에 map함수를 사용함. 그럼 coins안의 api에서 .name .symbol .quotes.USD.price
	      에 해당되는 값들이 한번씩 모두 출력된다.
          */
        ))}
      </ul>
    </div>
  );

*fetch(URL)를 useEffect안에 넣는 이유는 무한랜더링을 막기 위함이다. 만약 이를 useEffect 안에 넣지 않고 실행시키면
시작 시 useState 랜더링 -> fetch data에 의해 setCoins(json)으로 상태값이 바뀌어 리랜더링 -> 시작시 랜더링 ->상태값 바뀌어 리랜더링 ....... 이런형식으로 계속 리랜더링이 발생하게됨.

 

 

 

 

출력결과는 아래 클릭

https://stackblitz.com/edit/react-a2wyfx?file=src%2FApp.js