Kani's Blog

데이터 검색(필터링) App.js에 input 태그를 하나 붙이고 이 input 태그의 값을 키워드로 검색하는 부분을 만들어보겠습니다. App.js를 다음과 같이 수정해주세요. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091// App.jsimport React, { Component } from "react";import "./App.css"; import AccountBookForm from "./components/AccountBookFor..

데이터 제거 데이터를 제거하기 위한 몇 가지 방법이 있습니다. 12345678const array = [1, 2, 3, 4, 5]; // slice로 자른 후 concat으로 붙인다.array.slice(0, 2).concat(array.slice(3, 5)); // [1, 2, 4, 5]// [...array.slice(0, 2), ...array.slice(3,5)]; // 위와 같은 내용을 전개 연산자를 이용하여 표현 // 배열에서 3이 아닌 요소만 필터링array.filter(num => num !== 3); // [1, 2, 4, 5]cs 이제 실제 파일을 위와 같은 제거 방법을 써서 추가해 보겠습니다. App.js 파일을 다음과 같이 수정하세요. 12345678910111213141516171..

React에서는 기존에 javascript에서 배열을 다루듯이 하면 안됩니다. state의 내부의 값을 직접적으로 변경해서는 안되기 때문입니다. 이를 불변성 유지라고 합니다. push, splice, unshift, pop 같은 내장 함수는 배열자체를 직접 수정하게 되므로 적합하지 않고, concat, slice, map, filter와 같이 기존 배열을 기반으로 새로운 배열을 만드는 함수를 사용해야 합니다. 불변성을 유지해야 필요한 상황에 맞게 리렌더링이 되도록 설계할 수 있고, 성능도 최적화 할 수 있기 때문입니다. 데이터 추가 기존에 만든 AccountBookForm에서 추가한 데이터를 실제 배열에 추가해 보겠습니다. App에서 제어하도록 하겠습니다. App.js 파일을 다음과 같이 수정해주세요. ..

이번 시간부터는 지난 시간까지 배웠던 React의 문법을 사용하여 간단한 가계부를 만들어 보도록 하겠습니다. 여러 게시글을 통해 점차 살을 붙여갈 것입니다. 프로젝트 설치 및 시작 우선 새로운 프로젝트를 하나 설치하고 그 곳에서 작업하도록 하겠습니다. VS Code를 실행하고 개발 서버를 시작해주세요 12345create-react-app account-book-example cd account-book-example yarn startcs 시작하겠습니다. 우선 프로젝트의 src 안에 components 디렉터리를 생성해주세요. 이제부터 생성할 컴포넌트는 이 곳에 넣도록 하겠습니다. 컴포넌트 추가 - AccountBookForm src/components/AccountBookForm.js 파일을 생성해 ..