react map

map함수

JSX 중괄호 안에서 for문 사용할 수 없음. 사용하려면 따로 function을 빼서 사용.
JSX 중괄호 안에서 사용하려면 map함수 사용.

아래는 글제목 array state의 항목 갯수만큼 반복되도록 만든 map 함수임.
글제목은 3개의 항목을 가지고 있고, 따라서 3번 반복됨.

  let [글제목, 글제목변경] = useState([
    "첫번째 글제목",
    "두번째 글제목",
    "세번째 글제목",
  ]);

      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(true);
                setTitle(i);
              }}
            >
              {글제목[i]}
              <span
                onClick={(e) => {
                  e.stopPropagation();
                  thumbPlus(i);
                }}
              >
                👍 {따봉[i]}
              </span>
              <button
                onClick={(e) => {
                  deleteOne(i);
                  e.stopPropagation();
                }}
              >
                삭제
              </button>
            </h4>
            <p>2월 18일 발행</p>
          </div>
        );
      })}

function (a, i)가 뭐에요?

콜백함수. 소괄호 안에서 만든 함수. 두 개의 파라미터를 쓸 수 있음
a : array 안의 각각 항목들.
i : 반복문의 index. 0부터 시작해서 1씩 증가함.

key={i} 왜쓰나요?

리액트에서, map을 통해 반복적으로 작성된 html들을 각각 구분할 수 있게 해주는 장치.
안쓰면 warning 뜸.

글 추가 / 삭제될 때 따봉도 추가 / 삭제해주기

각각 따봉을 누르면 해당 index의 글만 +1씩 따봉 변경되도록 array state로 변경.
글 추가, 삭제 시 map의 i값을 전달받아 해당 index의 항목을 filter로 제거하여 state 재렌더링하는 방식으로 추가 / 삭제함.

  let [따봉, 따봉변경] = useState([0, 1, 2]);
  //엔터키 누를때 실행되는 함수
  const activeEnter = (e) => {
    if (e.key === "Enter") {
      const inputText = e.target.value;
      //글제목 array state 맨앞에 추가. spread 연산자 사용.
      //새 항목을 포함하는 새로운 배열 생성. 앞에 넣으면 앞쪽에 생성됨.
      let copy = [inputText, ...글제목];
      글제목변경(copy);
      //글제목변경 후, 따봉 배열 추가
      let copy2 = [0, ...따봉];
      따봉변경(copy2);
    }
  };
  //글제목 옆의 삭제버튼 클릭시 실행되는 함수.
  const deleteOne = (index) => {
    let copy = [...글제목];
    let copy2 = [...따봉];
    //filter 함수 사용.
    //삭제할글제목과 다른 배열 요소들만 필터링하여 반환. 재렌더링.
    글제목변경(copy.filter((_, i) => i !== index));
    따봉변경(copy2.filter((_, i) => i !== index));
  };

지하철에서 졸다가 map 강의를 까먹고 좀 늦게 들어버림.
강의 숙제에서 따봉 하나 누르면 다른 글들 따봉도 변경되는거 고쳐오라 했는데
겸사겸사 추가 / 삭제 부분도 변경해봄.

결과

잘 됨.