과제2: event & State

📌 목표

이벤트를 수신해서 상위 컴포넌트(Expenses)에 데이터 보내기.
1. 이벤트 수신하기
2. 상위 컴포넌트로 데이터 보내고, state에 저장하기

---

하하하하 lifting state up을 해보라는 말씀이구나
이지 이지 쏘이지 이지이지이지 이지 피지 레몬 스퀴지~~~ 🤡

📌 설계

1. Expenses에서 useState 상태값 2023년으로 설정 후

2. Expenses에서 함수 작성 후 ExpensesFilter에게 매개변수와 함께 전달

3. ExpensesFilter의 select에 onChange로 실행될 함수 만들고

4. 그 onChange 실행 함수 안에서 props로 Expenses에서 전달받은 함수 실행, 현재 선택값 전달

5. Expenses에서 꺼냄.

---

📌 내가 만든 코드

* Expenses.js

const Expenses = (props) => {
  const [year, setYear] = useState("2023"); //초기값 주고
  const clickYearHandler = (year) => {
    console.log("in Expenses", year);
    setYear(year); // 들어온 값으로 state에 저장
  };

  return (
    <div>
   	  <Card className="expenses">
      <ExpensesFilter year={year} onWhichYear={clickYearHandler} />
 //함수를 속성값으로 ExpensesFilter에 전달

* ExpensesFilter.js

const ExpensesFilter = (props) => {
  const yearClickHandler = (event) => {
    // console.log(event.target.value);
    //props로 전달받은 함수 실행, 매개변수로 event.target.value값 전달.
    props.onWhichYear(event.target.value);
  };
  return (
//...중략
        <select onChange={yearClickHandler}>

내가 만든 코드를 올리는 게 자충수는 아니겠지 ㅎ
나는 배우는 과정이니까!ㅎ 그래도 나 혼자 과제의 목적을 생각하며 만들어보았다.
근데 쭉 훑어보니 함수명을 짓는 게 아직 너무 조잡한 것 같다...
그래도 data를 상위 컴포넌트로 잘 보냈고, state에 저장도 잘 됐다.
뿌듯 ㅎㅎㅎ
이제 쌤은 어떻게 하셨는지 봐야겠다.

---

📌 과제 후기

갸아아아악
나는 보너스점수까지 받았다ㅎㅎㅎ
왜냐하면 강사님이 제시하셨던 두 가지 과제의 목적을 다 달성했고(이벤트 수신, state사용)
말씀하지 않으셨던 양방향 바인딩까지 나는 딱 해놓았다ㅋ

const [year, setYear] = useState("2023"); //초기값 주고
  
...중략
  return (			// 요기를 보라!
      <ExpensesFilter year={year} onWhichYear={clickYearHandler} />

핫핫핫핫핫
이렇게 양방향 바인딩으로 값을 전달해주면
ExpensesFilter에서 또 받아서 value값을 props.year로 설정해줄 수 있지... ><

하 뿌듯하당
함수, 속성명들은 강사님이 쓰신게 관례에 따른 정석이니
이름은 좀 바꿔주어야겠다 ㅎㅎ

---

📌 추가: 용어들

presentational vs. stateful components
stateless vs. stateful components
dumb vs. smart components.

Controlled Component: ex) ExpensesFilter(양방향 바인딩으로써 부모로부터 제어됨.)

• 중요 코드 부분 다시보기

  const dropdownChangeHanler = (event) => {
    // console.log(event.target.value);

    // Expenses에서 filteredYear를 전달하고, 
    // 그 상태값은 props를 통해 ExpensesFilter로 들어감.
    props.onChangeFilter(event.target.value);
    
  };



  return (
    <div className="expenses-filter">
      <div className="expenses-filter__control">
        <label>Filter by year</label>
    //양방향 바인딩 한 부분.
    //props.selected로 Expenses에서 값을 받음.
    //Expenses로 인해 제어됨.
        <select value={props.selected} onChange={dropdownChangeHanler}>