예산 계산기 앱 - 클래스 컴포넌트 방식(2)

Props를 통해 컴포넌트 간 데이터 전달하기

左) App.js파일에 임위 데이터를 추가하고 사용해줍니다.

右) ExpenseList.js파일에서 해당 데이터들을 props를 통해 호출합니다.

左) 실행해보면 console에서 해당 데이터들을 두번 불러옵니다.

右) index.js파일 중 React.StrictMode때문입니다. 이 엘리먼트를 삭제하면 정상적으로 한번만 불러옵니다.

 

Map 메소드를 사용한 지출 목록 나열

ExpenseList.js의 ul부분을 수정합니다.

map메소드를 이용해서 방금 데이터의 내용을 하나 하나 출력합니다.

주의해야 할 점은 map메소드는 key값, 즉, 고유한 값으로 사용해야 에러 안 뜹니다.

 

여기서 각 데이터 배열을 임위로 expense라는 이름을 붙여줬습니다.

ExpenseItem.js에서 expense배열 값을 호출해서 사용하면 됩니다.

 

Filter 메소드를 사용해서 지출 목록 지우기

handleDelete = (id) => {
  const newExpenses = this.initialExpenses.filter(expense => expense.id !== id)
}

App.js에 삭제 함수를 만들어줍니다.

filter메소드는 무엇을 걸러내는 역할을 합니다.

expense의 id가 맞지 않는 것을 filter메소드를 통해 걸래내서 newExpenses에 담아줍니다.

左) handleDelete함수를 props를 통해 자식 컴포넌트인 ExpenseList.js로 전달합니다.

右) ExpenseList.js에서 handleDelete함수를 props를 통해 ExpenseItem.js로 전달합니다.

ExpenseItem.js에 삭제 버튼을 클릭하면 handleDelete함수가 실행됩니다.

 

console.log를 통해 모두 정상적으로 작동된 것을 확인됐지만 뷰포트에는 변화가 없습니다.

이게 props는 데이터를 변화할 수 없기때문입니다. 데이터를 변화하려면 state를 사용해야합니다.

 

변화할 데이터들을 state안에 담아주기

constructor(props) {
  super(props)
  this.state = {
    expenses: [
      {id: 1, charge: "렌트비", amount: 1600},
      {id: 2, charge: "교통비", amount: 400},
      {id: 3, charge: "식비", amount: 1200}
    ]
  }
}

App.js 기존에 initialExpenses 변수를 삭제하고 위와 같이 작성해줍니다.

그리고 기존 props를 state.expenses로 대체합니다.

handleDelete함수 안에 .setState메소드는 state를 새로고침하는 역할입니다.