차근차근 배움터

ExpenseList.js 를 생성해서 조건 명령문에 따른 코드를 따로 구분했다 ExpenseList.js import ExpenseItem from './ExpenseItem'; import './ExpenseList.css'; const ExpenseList = (props) => { let expensesContent = No expenses found.; if (props.items.length === 0) { return Found no expenses. } return { props.items.map((expense) => ( )) } } export default ExpenseList; Expenses.js import ExpensesFilter from "./ExpensesFilter"; ..

나는 class를 추가하고 빼는 것으로 만들었지만 선생님은 useState를 이용해서 먼저 상태를 추가했다 form이 보일지 안 보일지를 결정하는 state를 추가한다. 아직도 헷갈리는 부분은 자식 컴포넌트에서 부모 컴포넌트로 전달하는 부분이다 ExpenseForm.js Cancel 자손 컴포넌트에서 onClick 이벤트가 발생했다! 그럼 props의 onCancel ( ) 이 실행 되는데 .... props를 전달해준 부모 컴포넌트를 보면 onCancel에 stopEditingHandler() 메서드가 연결되어 있기 때문에 그것이 실행된다.... 라고 이해했다 NewExpense.js

위의 form을 기본적으로 보이지 않게 했다가 아래와 같은 Add New Expense 버튼을 클릭했을 때 등장하도록 바꾸기 과제 완료 const toggleExpenseForm = (event) => { document.getElementsByClassName("new-expense__controls")[0].classList.toggle('toggleDisplay'); document.getElementsByClassName("new-expense__btn")[0].classList.toggle('toggleDisplay'); } New Add Expense

if 나 for 문은 jsx 중괄호 안에서 사용할 수 없다 대신 삼항 조건식을 이용하여 조건부 내용을 출력할 수 있다 {filteredList.length === 0 ? No expenses found. : ( filteredList.map((expense) => ) ) } 아니면 아래와 같이 JS를 이용해서 정리해서 작성할 수도 있다. {filteredList.length === 0 && No expenses found. } {filteredList.length > 0 && ( filteredList.map((expense) => ) ) } 또 다른 방법은 깔끔하게 위에서 로직을 정리해서 jsx 에는 변수만 출력하는 방법인데 아래를 보자 expenseContent에 JSX 문법을 그대로 담아서 retu..

filter를 사용하면 기존의 배열에 있던 요소들이 사라지지 않는다 나는 Number로 year를 비교했지만 선생님은 String으로 비교하셨다 복잡하게 생각할 필요가 없다

과제: 연습해봅시다: 목록(List) 작업하기 힌트 filter 메서드를 이용해서 배열을 filtering 하기 너무 복잡하게 생각하지 말고 expense 전체 배열을 변경할 필요가 없다 expense 배열을 기반으로 새로운 배열을 도출할 수 있다 간단하게 filter를 이용해서 date의 year 값을 얻어내 비교해서 새로운 배열을 만들었다 Expense.js import ExpenseItem from "./ExpenseItem"; import ExpensesFilter from "./ExpensesFilter"; import Card from "../UI/Card"; import { useState } from 'react'; import "./Expenses.css"; function Expense..

map() 를 이용해서 컴포넌트들을 반복 출력한 경우에 순서대로 정렬한다던가 요소들 간의 구분을 용이하게 하기 위해서 key라는 props를 추가해야 한다. key 값은 고유한 id 와 같은 것들로 적용해야 한다. key 값을 줌으로써 리액트는 배열의 길이 뿐만 아니라 어디에 아이템을 위치해야 하는 지까지 알며, 아이템들을 식별할 수 있게 된다. 효율적으로 업데이트 할 수 있다 => key 입력 안 해서 이전 강의에서 하던 부분이 계속 에러 났었는데 key 입력하니까 문제가 해결했다

App.js 에 있는 expenses 배열 변수에 값을 추가해야 한다. 그리고 우리가 이미 알다시피 변수만 바꾸는 것은 화면 상의 데이터를 변경하지 않기 때문에 useState 를 사용해야 한다. setState와 관련된 에러에 멈췄다 prev 이전 함수들과 섞는 과정에서 문제가 있는데 왜 이렇게 결과가 나왔는지 몰라서 헤매고 있다.. import { useState } from 'react'; import './App.css'; import Expenses from './components/Expenses/Expenses'; import NewExpense from './components/NewExpense/NewExpense'; const DUMMY_EXPENSES = [ { id: 'e1', ti..

JSX에서 동적인 구문을 실행하고 싶을 때 {} 중괄호 안에서 작성한다 map() 을 사용해서 를 개수만큼 출력할 수 있다 이미 아는 개념이라 가볍게 넘어감 아래 네 줄의 코드를 위의 한 줄로 간단하게 만들 수 있다 {props.items.map((expense) => )}

페이지에서 어떻게 배열을 출력할 수 있는지 다양한 조건에서 다양한 컨텐츠들을 보여줄 수 있는 방법을 살펴볼 것이다