오늘의 React

1. map

• 왼쪽 배열 자료만큼 내부코드 실행해준다.
• 함수의 파라미터는 array 안에 있던 자료다.
• return에 뭐 적으면 array로 담아준다.
• 소괄호 안에 들어가는거 다 콜백함수
• 같은 html 반복생성하는 법

 {
   // a는 배열에 안에 데이터이므로 파라미터 안에 아무거나 넣고 중괄호 안에 넣어주면 차례대로 배열에 있던 데이터가 출력된다. 
   // i는 반복문을 돌 때마다 1씩 증가하는 정수 
   글제목.map(function(a, i) {
    	return (
        // 반복문으로 html 생성하면 key={ html마다 다른숫자 } 추가해야한다.
         <div className="list" key={i}>
           <h4> { 글제목[i] } <span onClick={ () => { 따봉변경(따봉+1) } }>👍</span> { 따봉 }					</h4>
           <p>2월 17일 발행</p>
         </div>
       )
     })
  }

• 해당 글제목을 눌렀시에 따봉 +1을 하는법
  • state을 글제목 개수만큼 넣어주고
  • 그리고 배열은 제발 꼭 배열을 복사 해줘야해
  • 그리고 해당 글제목을 +1을 인덱스를 활용해서 해주고
  • 그것을 다시 함수 안에 넣어서 상태를 변경시키고
  • 그리고 배열에서 해당 글의 인덱스를 뽑아주면 된다.

/* eslint-disable */

import { useState } from "react";
import './App.css';

function App() {

  let post = "강남 우동 맛집";
  let [글제목, 글제목변경] = useState(["남자코트추천", "강남우동맛집", "파이썬 독학"]);

  let [modal, setModal] = useState(false);

  let [따봉, 따봉변경] = useState([0, 0, 0]);


  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>

     {
      글제목.map(function(a, i) {
        return (
          <div className="list" key={i}>
            <h4> { 글제목[i] } <span onClick={ () => {    
              // 배열 복사
              let copy = [...따봉];
              // 따봉 +1
              copy[i] = copy[i] + 1;
              // 상태변경
              따봉변경(copy);
             } }>👍</span> { 따봉[i] } </h4>
            <p>2월 17일 발행</p>
          </div>
        )
      })
     }
    </div>
  );
}

export default App;