![]()
리액트를 공부하다가 for문을 통해 지출 값을 더해서 그래프를 올려야 되는데 작동이 안되서 보니 for문 문제였다. 이때 알게된 JavaScript의 for문에 대해 포스팅 하려고 한다. 먼저 내 React 프로젝트에서 ExpensesChart라는 컴포넌트가 부모 컴포넌트로부터 DUMMY_EXPENSES 배열을 전달받아서 amount 즉 가격을 더한다. 근데 여기서 배열에 담긴 amount값이 더해지지 않는 문제가 생겼다. // ExpensesChart가 props로 받는 배열 const DUMMY_EXPENSES = [ { id: "e1", title: "Toilet Paper", amount: 94.12, date: new Date(2020, 7, 14), }, { id: "e2", title: "N..
![]()
리액트로 지출 관리를 해주는 가계부 프로젝트를 진행중에 F12를 눌러 콘솔을 봤더니 Each child in a list should have a unique "key" prop.라는 Warning이 발생했다. 해당 Warning은 아래의 ExpenseList라는 컴포넌트에서 발생한 경고 메세지이다. ExpenseList 컴포넌트는 내가 산 물건의 정보를 입력하면 map에 담긴 내가 산 물건의 정보 + 입력한 정보를 ExpenseItem으로 보내서 출력하는 역할을 가지고있다. 아래의 코드를 보고 다시 살펴보자 const ExpensesList = (props) => { if(props.items.length === 0) { return Found no expenses.; } return ( {props...
