24. 05. 30 TIL (props-drilling-4)

8. DetailPage

이 파일은 각 리스트를 클릭했을 때 이동하는 상세 페이지다.

 

먼저

  const { detailId } = useParams();

url에서 detailId ( 현재 항목의 고유 id)를 가져온다.

 

그리고 입력 상자에 접근하기 위해 useRef를 사용한다.

  const dateRef = useRef(null);
  const itemRef = useRef(null);
  const amountRef = useRef(null);
  const descriptionRef = useRef(null);

첫 기본 값은 null로 설정한다.

 

그리고 이동해야하므로

  const navigate = useNavigate();

페이지를 이동할 수 있는 함수를 만든다.

 

이제 항목을 찾아야 하는데

클릭한 것 하나만 가져오므로 이번엔 find를 돌려 가져온다.

const filterId = itemList.find((item) => {
  return item.id === detailId;
});

 

일단 내부 값을 가져와본다.

    <Container>
      <Container2>
        <Box>
          <label htmlFor="date">날짜</label>
          <Input
            type="date"
            id="date"
            defaultValue={filterId.date}
            ref={dateRef}
          />
        </Box>
        <Box>
          <label htmlFor="item">항목</label>
          <Input
            type="text"
            id="item"
            placeholder="항목"
            defaultValue={filterId.item}
            ref={itemRef}
          />
        </Box>
        <Box>
          <label htmlFor="amount">금액</label>
          <Input
            type="number"
            id="amount"
            placeholder="금액"
            defaultValue={filterId.amount}
            ref={amountRef}
          />
        </Box>
        <Box>
          <label htmlFor="description">내용</label>
          <Input
            type="text"
            id="description"
            placeholder="지출 내용"
            defaultValue={filterId.description}
            ref={descriptionRef}
            // value={descriptionValue}
          />
        </Box>

        <BtnBox>
          <EditBtn onClick={editClickBtn}>수정</EditBtn>
          <DelBtn onClick={delClickBtn}>삭제</DelBtn>
          <BackBtn onClick={backClickBtn}>뒤로 가기</BackBtn>
        </BtnBox>
      </Container2>
    </Container>

ref와 defaultValue를 작성해준다. 그리고 기본값은 filterId로 찾은 값을 보이도록 넣어준다.

 

이제 수정 버튼을 클릭하면 함수가 실행되는데

 

이 함수는

function editClickBtn() {
    const editInput = {
      date: dateRef.current.value,
      item: itemRef.current.value,
      amount: amountRef.current.value,
      description: descriptionRef.current.value,
      id: detailId,
    };

    setItemList((prev) =>
      prev.map((item) => (item.id === detailId ? editInput : item))
    );
    navigate('/');
  }

ref를 업데이트한 객체를 만들어서, setItemList에 다시 배열을 돌리는데

map은 각 항목을 검사해서 변경된 내용이 있면 detailId와 같은 id를 가진 항목을 editInput으로 변경한다.

그리고 navigate를 넣어 홈으로 이동한다.