[react] DeepDive 4 리액트 state

스프레드 문법 [...변수명]

기존의 배열이나 객체를 변경하지 않으면서 그 값을 가지고 새로운 배열이나 객체를 생성할 수 있다

 const addExpenseHandler = (expense) => {
    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses];
    });
  };

여기서 prevExpenses는 이전의 expenses 배열을 나타낸다

새로운 expense를 추가할 때는 배열의 spread 연산자 ...를 사용하여 기존 배열의 모든 요소를 가져오고,

그 앞에 새로운 expense를 추가한다

 

부모 자식 컴포넌트 간의 양방향 통신은 어떻게 할까?

 

Expenses는 부모컴포넌트,

ExpensesFilter는 자식 컴포넌트로 구성하고

 

예를들면, 

자식 컴포넌트에서 선택된 년도를 받아와서
부모컴포넌트에서 선택된 년도의 item들만 불러오게 할 것이다

 

Expenses.js

import React, { useState } from "react";
import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
import Card from "../UI/Card";
import ExpensesFilter from "./ExpensesFilter";
import "./ExpensesFilter.css";

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState("2020");
  const filterChangeHandler = (seletedYear) => {
    console.log("Expenses.js");
    setFilteredYear(seletedYear);
  };
  const filteredExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  });
  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
      </Card>
    </div>
  );
};

export default Expenses;

 

filteredYear로 년도를 useState로 상태관리를 한다

Expenses.js

 const [filteredYear, setFilteredYear] = useState("2020");

카드 컴포넌트에 함수를 자식 컴포넌트로 props를 이용해 전달한다

Expenses.js

   <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />

 

ExpensesFilter.js

import React from "react";

import "./ExpensesFilter.css";

const ExpensesFilter = (props) => {
  const dropdownChangeHandler = (e) => {
    props.onChangeFilter(e.target.value);
  };
  return (
    <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;

=> props를 이용해서 부모컴포넌트의 함수를 받아와준다

ExpensesFilter.js

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

=> select태그에 onChange 이벤트리스너 함수로 

현재 select태그에 선택된 값을 받아와준다

 

Expenses.js

  const filterChangeHandler = (selectedYear) => {
    console.log("Expenses.js");
    setFilteredYear(selectedYear);
  };
  const filteredExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  });

=> 다시 부모 컴포넌트로 돌아오면 

자식 컴포넌트에서 e.target.value를 인자로 받아 selectedYear에 넣어주었다