유데미 강의 React 완벽 가이드의 첫 번째 프로젝트

리액트 강의를 무엇을 들으면 좋을까 알아보던 중 유데미에 Maximilian Schwarzmüller분께서 제작하신 리액트 완벽가이드 강의를 보았고 탄탄한 내용과 강의에 대한 평도 굉장히 좋아서 강의를 듣게 되었습니다.

 

강의를 들으면서 자바스크립트의 문법 중 화살표 함수, 스프레드 및 나머지(rest) 연산자, 구조분해 할당 등을 배웠으며, 리액트의 하향식 데이터 전달 방법인 props를 배워 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하는 방법을 통해 페이지와 컴포넌트를 따로 분리하여 최종적으로 가독성과 재사용성을 높여 줄 수 있다는걸 알게 되었습니다.

 

또한, 리액트의 훅 중 하나인 useState를 통하여 기존의 리액트가 이미 한번 렌더링 된 후 데이터나 화면이 변경되어도 인지하지 못 하기 때문에 useState를 통해 리액트에 변경된 사항에 대해 인식시켜 주는 방법을 배웠습니다. 

 

이를 통해 핸들러가 실행 되었을때 핸들러 내부의 데이터가 변경 되었음을 useState를 사용하여 리액트에 인식 시켜주는 방법으로 사용자가 데이터를 입력 했을때, 연도를 클릭 했을때, 연도에 따른 저장된 데이터를 보여줄때 등 굉장히 많은 영역에 useState를 사용하였습니다.

 

하향식 데이터 전달 외에도 상향식 데이터 전달 방법과 배열 메서드인 map 함수를 이용하여 사용자가 입력한 상품의 데이터를 새로운 배열에 담아 사용자 정의 컴포넌트에 뿌려주어 길고 복잡한 코드를 간략하게 줄일 수 있었습니다.

 {filteredExpenses.map((items) =>  
        <ExpenseItem
          key = {items.id}
          title = {items.title}
          amount = {items.amount}
          date = {items.date}
        />)}

그리고 강의 중간중간 혼자서 구현하는 퀴즈가 몇 개 주어지는데 그중 가장 어려워서 기억에 남았던 기능이 사용자가 선택한 연도에 데이터가 있으면 가져오는 기능이었는데 당시 filter라는 메서드를 알지 못하여 if 문을 통해 하드 코딩을 했었고 후에 filter라는 메서드를 통해 굉장히 간단하게 구현하는 것을 보고 경악을 금치 못 했습니다.. (굉장히 간단한 기능이지만 너무 많은 컴포넌트로 인하여 데이터를 가져오는데 꽤 애를 먹어서 3시간 정도 고민 하다 if문으로 하드코딩한 문제 였습니다..)

 

 

if문으로 하드코딩

import React, { useState } from 'react';
 
import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';
import './Expenses.css';
 
const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState(2020);
 
  const filterChangeHandler = selectedYear => {
    setFilteredYear(selectedYear);
  };
 
  let newDummy_Data = [];
 
  for (let i = 0; i<props.items.length; i++ ) {
    if(props.items[i].date.getFullYear() == filteredYear) {
      newDummy_Data.push(props.items[i]);
    }
  }
 
  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        {newDummy_Data.map((items) =>  
        <ExpenseItem
          key = {items.id}
          title = {items.title}
          amount = {items.amount}
          date = {items.date}
        />)}
      </Card>
    </div>
  );
};

 

filter를 통한 심플한 구현

import React, { useState } from 'react';

import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';
import ExpensesList from './ExpensesList';
import ExpensesChart from './ExpensesChart';

import './Expenses.css';

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState(2020);

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


  const filteredExpenses = props.items.filter(expense => {
    return expense.date.getFullYear() == filteredYear
  });

  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        {newDummy_Data.map((items) =>  
        <ExpenseItem
          key = {items.id}
          title = {items.title}
          amount = {items.amount}
          date = {items.date}
        />)}
      </Card>
    </div>
  );
};

export default Expenses;

 

리액트 props

부모 컴포넌트에서 데이터를 자식 컴포넌트에게 넘겨주기 위해 사용하는 것 (단반향 바인딩)

 

사용법

부모 컴포넌트 <ExpenseItem items = {expenses} />

자식 컴포넌트 : const ExpenseItem = ( props ) => { }