state 끌어올리기

순서

1. 바꿀 부분 지정하고 이벤트 부여하기, useState추가하기

useState 방법 (1)

useState 방법 (2) - 추천 X, 이 방법을 쓸 거면 방법 (3) 을 추천

오래되었거나 잘못된 상태 스냅샷에 의존할 수도 있는 방법임

useState 방법 (3) - 이전 상태에 기반하는 방법(ex. 카운터)

1번과 차이점은 1번은 변경이 독립적으로 적용되지만, 이 경우 묶어준 값을 전부 변경해줘야 함.

 

---

2. 양방향 바인딩으로 제출하기 기능 만들기

 

---

3. 자식 속성을 부모에게 전달시키기 (ExpenseForm의 입력된 데이터를 App의 데이터에 추가 시키기)

3-1. ExpenseForm 데이터를 NewExpense로 전달하기

 

onSaveExpenseData기능이 활성화되도록 만들기

NewExpense에 적었지만, 그 함수를 다른 컴포넌트에서 실행하도록 만듦

자식 컴포넌트로 연결해준 뒤

onSubmit에 적어 실행되도록 만듦 (props.부모의 'x = {y}' x부분)

3-3. 전달 받은 NewExpense 데이터를 App로 전달하기 (3-2 과정 반복)

App.js

 

---

4. filter 컴포넌트 만들어서 state정보 Expenses에 전달하기

4-1. Expenses.js로 데이터 전달하기

4-2. 양방향 바인딩 추가

2020년을 초기값으로 주기

Expenses.js

ExpensesFilter.js