React 기초 230823

~45일차~

실습을 진행하며 나중을 위해 기억하고 싶은 내용만 몇가지 추려봤다.

인용구로 작성한 내용은 실습 중 만들어진 코드로, 간단한 설명을 주고 있다.

---

valueAsNumber

const handleAmount = (event) => {
    setAmount(event.target.valueAsNumber)
  }

valueAsNumber : value를 숫자로 가져온다.
-> number를 씌워 받아올 수도 있지만 코드를 더욱 짧게 쓸 수 있음

---

preventDefault()

const handleSubmit = (event) => {
    event.preventDefault();
  }

preventDefault : 기본 동작 막기 ( ex:리프레쉬 막기)

handleSubmit : submit버튼을 눌렀을 때 event로 받아와 동작.
해당 코드는 일부 내용으로, submit버튼을 눌렀을 때 화면이 새로고침되는 동작을 막은 내용이다.

---

setTimeout()

const handleAlert = ({type, text})  => {
  			// type:type, text:text를 축약
    setAlert({show:true, type, text});
    //setTimeout(() => {}, 초)
  	setTimeout(() => {
      setAlert({show:false, type:'', text: ''});
    }, 5000);
  }

handleAlert : type 별 text를 받아 alert을 실행한 다음,
5초가 지나면 show:false로 사라지게 만드는 내용

---

reduce()

 총 지출
        <span>
   			//arr.reduce((acc, curr) => {}, 초기값)
          {expenses.reduce((acc, curr) => {
          return (acc + curr.amount)
          }, 0)}   
        원</span>

accumulator : 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출, 또는 초기값이 있을 때는 초기 값
currentValue : 현재 값

해당 코드는, 가계부에서 총 지출한 비용을 합산하는 코드이다.
객체마다 입력된 비용을 amount로 받았고 전체 amount를 누적하며 합산한다.

reduce 참고문서

---

find()

// 선택한 객체 불러와서 인풋에 기존 데이터 넣기
  const handleEdit = (id) => {
    const expense = expenses.find(item => item.id ===id)  //find : 선택한 id의 객체를 찾아 반환
    const {charge, amount} = expense;
    setCharge(charge);
    setAmount(amount);
    setEdit(true);
    setId(id);
  }

handleEdit : 객체를 선택해서 내용을 수정하고, 다시 수정된 내용이 보이도록 만든 내용.
id를 받아와서 id를 가진 객체를 찾은 다음, 수정한 내용을 받아 새로운 내용을 적용시켜준다.