차근차근 배움터

style을 추가하고 싶을 때 dash 가 존재하는 경우에는 따옴표로 감싸서 작성하거나 아니면 카멜케이스로 따옴표 없이 작성하면 된다 .ChartBar.js import React from 'react'; const ChartBar = () => { let barFillHeight = '0%'; if (props.max > 0) { barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%'; } return } export default ChartBar;

모든 차트의 바는 전체 차트의 최댓값을 기준으로 값을 표시한다 그래서 속성으로 maxValue도 전달한다 또 차트에 label을 넣을 건데 label값은 key 값으로 사용할 것이다 Chart.js import ChartBar from "./ChartBar"; import "./Chart.css"; const Chart = props => { return {props.dataPoints.map(dataPoint => )} } export default Chart;

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 입력하니까 문제가 해결했다

리액트 프로젝트를 생성하고 scss 설치하고 Navbar.js 파일을 만들어서 App.js에 추가 import Navbar from "./components/common/Navbar"; import Home from "./components/routes/Home"; // import { Link } from "react"; function App() { return ( ); } export default App; css 연습을 좀 했다 저 아이콘 부분 중앙 정렬하는 게 헷갈려서 시간 좀 쏟음 Navbar.js import "./Navbar.scss"; import instagram from "../../images/instagram.png"; import facebook from "../../images..