React #5 | map, find, fliter

map

-> [반복문, 한줄 씩 읽어오는것]
-> 주고 배열의 길이 만큼 반복할 때 사용
ex)
배열명.map((결과값 변수명) => 실행문

ex) 실행문의 경우
userList.map((v) => console.log(v.id)) // 1,2,3

ex) html 반복의 경우
userList.map((v) =
(

<div>

)) -> map 을 써서 div를 반복. html안에 있는 div가 반복해서 보여주게 된다.

find / findIndex

-> 주로 배열 내에서 조건식을 만족하는 값/ 인덱스를 찾아올때 사용.
-> 찾은후 백엔드에 전달. + 값을 추가 할때도 사용.
-> [검색, 조건에 맞는 데이터를 읽어오는것]
ex)
배열명.find((결과값 변수명) => 조건식)

const [userList, setUserList] = useState([
 {
   id: 1,
   name: "사과"
 },
 {
   id: 2,
   name: "오렌지"
 },
 {
   id: 3,
   name: "자몽"
 }
])

userList.find((v) => v.id ===1).name 

-> userLisr 에서 id값이 1 인것을 찾고, 객체 전체를 가져옴.(객체 자체) 가져 온것에서의 name 값 출력. 따라 "사과" 가 출력된다.

userList.findIndex((v) => v.id === 1)	

-> id값이 1인 인덱스 번호 "0" 이 출력된다.
만약, 인덱스 번호 값으로 "사과" 가 출력되게 하려면?

userList[0].name

filter

-> [필터망, 조건에 맞지 않는 데이터를 거르고 맞는 데이터만 제외하고 읽어오는 것]
-> 삭제시에 백엔드에서 받아온 데이터가 있음.

ex)
배열명.filter((결과값 변수명) => 조건식)

import {useState} from 'react';
import AddState from './addState';

const State = () => { 
const [userList, setUserList] = useState([
  {
    id: 1,
    name: "사과"
  },
  {
    id: 2,
    name: "오렌지"
  },
  {
    id: 3,
    name: "자몽"
  }
])

// 원본 훼손 되지 않게 하기위해 원본 복사후 아이디 값 추가. 
const onClickEvent = (idValue, nameValue) => {
  setUserList([...userList, {id: idValue , name: nameValue}])
}


// 불변성 지킨, id 값이 제거된 상태를 가져오는것. 
// e.target.value 가 string타입 인것을 알게 하기위해 "parseInt"로 강제 형변환을 시켜준다.
const onRemoveHandler = (e) => {
  const removeState = userList.filter(
    (v) => v.id !== parseInt (e.target.value));
  		// 불변성 지킨, id 값이 제거된 상태를 가져오는것. 
    setUserList(removeState)
   		// state 값 을 removeState 으로 변경. 
}
return(
  <>
    {userList.map((v) => (
      <div>
        {v.id}. {v.name}
        <button
         value={v.id} 
		// e.target.value 의 속성을 알기 위해 , button의 value값 추가.
         onClick={onRemoveHandler}>삭제</button>
      </div>
    ))}
    <AddState 
        onClickEvent={onClickEvent}
        stateId={ userList.length > 0 && userList[userList.length-1].id}
    />
    </>
  )
}
export default State;

✅ 출력결과

✅추가 설명
-> 예를들어 4번의 값에 삭제 버튼을 누른다. value={v.id} 클릭한 value 값이 4.
v.id 의 값이 !== (e.target.value) 즉, 4와 맞지 않은 데이터들(userList.filter) 1,2,3의 객체 값만 removeState 로 가지고 온다.

🚩 fliter 를 조금더 자세히 이해하기.

ex)
1. 상품 정보를 back-end 에 요청 .
2. 백엔드는 DB 에 요청 .
3. 상품정보 받아올때 안에 데이터가 리뷰 10개가 있다.
4. 리뷰 10개가 포함된 데이터 Front-end 전달.
5. Front-end 어딘가에 저장.
6. user가 리뷰 5번 삭제 -> Front-end에서 5번 리뷰 삭제 요청
7. back-end 는 DB 에서 5번 리뷰 삭제.
8. back-end DB 에는 5번 리뷰 삭제후 9개 리뷰 데이터가 남아있음.
9. 현재 Front-end 저장되어있는 리뷰 수 10개.
10. filter을 이용해서 5번리뷰를 뺀 나머지 9개의 데이터를 변수에 다시 세팅
11. "조건식을 제외하고 다시 받아옴"