[ 스파르타 / TIL ] 내일배움캠프 #30 [기본값 설정해주는 방법]

오늘 한 것

---

• 알고리즘 문제 풀기
• 리액트 강의 보기

 

 

노트 정리

---

[ 프로그래머스 / Javascript ] 콜라츠 추측

 

 

Redux

---

Redux에는 데이터를 저장하는 store이 있다. 그리고 그 안에 reducer이 포함되어 있는 상태이다. 

store은 상태를 저장하는 장소이다. 이때 store에서 어떤 action을 일으킨다는 것은 dispatch라고 한다.

reducer는 우리가 action을 일으키면 자동으로 실행된다. 그리고 그 action에 맞게 데이터를 수정해 준다. 그래서 store에 있는 데이터를 바꿔 주는 역할을 reducer이 한다. 

 

 

 

현재 2022로 출력되는 값에 기본값 2020 설정하기

---

 

 

Expenses.js

---

const Expenses = (props) => {
  // useState에 2020 기본값으로 설정해준다.
  const [filteredYear, setFilteredYear] = useState('2020');
 
  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };

  return (
	// <ExpensesFilter> 안에 slected에 기본값인 filteredYear을 추가해준다.
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        <ExpenseItem title={props.items[0].title} amount={props.items[0].amount} date={props.items[0].date} />
        <ExpenseItem title={props.items[1].title} amount={props.items[1].amount} date={props.items[1].date} />
        <ExpenseItem title={props.items[2].title} amount={props.items[2].amount} date={props.items[2].date} />
        <ExpenseItem title={props.items[3].title} amount={props.items[3].amount} date={props.items[3].date} />
      </Card>
    </div>
  );
};

export default Expenses;

 

 

 

ExpensesFilter.js

---

const ExpensesFilter = (props) => {
  const dropdownChangeHandler = (event) => {
    props.onChangeFilter(event.target.value);
  };

  return (
  // <select>태그안에 value={props.selected}를 설정해준다.
    <div className='expenses-filter'>
      <div className='expenses-filter__control'>
        <label>Filter by year</label>
        <select value={props.selected} onChange={dropdownChangeHandler}>
          <option value='2022'>2022</option>
          <option value='2021'>2021</option>
          <option value='2020'>2020</option>
          <option value='2019'>2019</option>
        </select>
      </div>
    </div>
  );
};

export default ExpensesFilter;