parameter_TIL(42)

1.내가 만난 문제

map을 돌려서 받은 list들을 item.id와 내가 선택한 그 하나의 값 id을 비교하다가 갑자기 막혔다.

모든 list들이 다 id와 일치한다고 나왔다.

코드로 보자면 4번줄에 해당한다.

const modalHandle = (id, password) => {
        selectedComments?.map((item) => {
            console.log(item);
            return id === item.id ? setModalOpen(true) : console.log("안 켜짐");
        });
        document.body.style.overflow = "hidden"; // 모달창 오픈 시 배경 스크롤 비활성화
    };

2.시도

 1) 먼저 console.log()로 모든 props들의 값들을 찍어봤다.

     근데 자꾸 비교하는 값 (id) 이 undefined 였다.

 2) 상위 컴포넌트에서 받아 온 props(selectedComment)와 item.id를 비교했다.

 ❓생각이 짧았다. props로 가지고 온 id와 돌고있는 Id가 일치한 값만 가져온다고 생각했다.

   ✅ 이렇게 되면 결국에 똑같은 값들을 서로 비교하니까 다 id가 일치한다고 나온다.

 

3.해결

modalHandle을 실행하는 버튼에 값을 주어야한다.

  <RiDeleteBinLine  onClick={() => {
        return modalHandle(item.id, item.password);}}    //여기
            style={{ursor: "pointer",marginLeft: "15px", float: "right",}}
      />

 이렇게 값을 주면 댓글리스트를 map을 돌리면서 버튼을 생성하므로 그때 마다 생성된 id값이 위의 item.id와 일치한지

 비교를 해야한다. 그래서 파라미터로 전달을 해줘야한다.

 

4.깨달은점

 :자바스크립트 기본 개념을 놓치지말고 꾸준히 공부하자. 파라미터로 data값을 전달하는 것을 이번에 확실히 알았다.

  이번과 같은 기능구현을 한다면 전보다 더 잘 할 수 있을 꺼같다.

  리액트는 할 수록 자바스크립트의 문법들이 탄탄하면 기능을 잘 구현 할 수 있겠다라는 생각이 들었다.

😎