과제: 연습해봅시다: 이벤트 & 상태 작업하기

약간 헷갈렸던 과제

자손 컴포넌트에서 부모 컴포넌트로 전달하는 과제였다

먼저 자손 컴포넌트였던 ExpensesFilter.js 에서 
select 태그에 움직임이 감지될 때마다 함수가 실행되게끔 해야 한다 

1. Handler 만들기

const dropdownChangeHandler = (event) => { 
    props.onChangeYear(event.target.value);
  }
  
  <select onChange={dropdownChangeHandler}>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
      </select>

 

2. Expenses.js에 ExpenseFilter 컴포넌트 추가하기

return <Card className="expenses">
    <ExpensesFilter selected={filteredYear} onChangeYear={filterChangeHandler} />
    <ExpenseItem title={props.items[0].title} amount={props.items[0].amount} date={props.items[0].date} id={props.items[0].id} />
    <ExpenseItem title={props.items[1].title} amount={props.items[1].amount} date={props.items[1].date} id={props.items[1].id} />
    <ExpenseItem title={props.items[2].title} amount={props.items[2].amount} date={props.items[2].date} id={props.items[2].id} />
    <ExpenseItem title={props.items[3].title} amount={props.items[3].amount} date={props.items[3].date} id={props.items[3].id} />
  </Card>

 

3. 
ExpenseFilter.js 에서 Expenses.js 로 year 값 전달하기
그리고 그 값을 state로 관리한다

 

ExpensesFilter.js

import './ExpensesFilter.css';
import { useState } from 'react';
function ExpensesFilter(props) {

  const [year, setYear] = useState('2023');
  const dropdownChangeHandler = (event) => {
    setYear(event.target.value);
    props.onChangeFilter(event.target.value);
  }

  return <div className="expenses-filter">
    <div className='expenses-filter__control'>
      <label>Filter by year</label>
      <select value={year} onChange={dropdownChangeHandler} name="year" id="year">
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
      </select>
    </div>
  </div>
}

export default ExpensesFilter;

Expenses.js

import ExpenseItem from "./ExpenseItem";
import ExpensesFilter from "./ExpensesFilter";
import Card from "../UI/Card";
import { useState } from 'react';
import "./Expenses.css";
function Expenses(props) {
  const [filteredYear, setFilteredYear] = useState('2021');

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  }

  return <Card className="expenses">
    <ExpensesFilter selected={props.selected} onChangeFilter={filterChangeHandler} />
    <ExpenseItem title={props.items[0].title} amount={props.items[0].amount} date={props.items[0].date} id={props.items[0].id} />
    <ExpenseItem title={props.items[1].title} amount={props.items[1].amount} date={props.items[1].date} id={props.items[1].id} />
    <ExpenseItem title={props.items[2].title} amount={props.items[2].amount} date={props.items[2].date} id={props.items[2].id} />
    <ExpenseItem title={props.items[3].title} amount={props.items[3].amount} date={props.items[3].date} id={props.items[3].id} />
  </Card>
}

export default Expenses;