코드사냥꾼의 전리품

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터 삭제하기 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거하기 위해서는, 여러가지 방법이 있을 수 있다. 먼저 자바스크립트 배열을 가지고 연습해보자. const arr = [1, 2, 3, 4, 5]; arr 배열에서 3을 제거해보자. 기존의 배열은 그대로 유지하고 새 배열을 만들어서 3을 제외시키겠다. 첫번째 방법은 slice와 concat을 이용하는 것이다. 3을 기준으로 좌측의 배열과 우측의 배열을 서로 합쳐주는 것이다. array.slice(0,2).concat(array.slice(3,5)) //[1, 2, 4, 5] 배열 전개 연산자(...)를 사용하면 다음과 같이 구현할 수도 ..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터를 추가해보자 App 컴포넌트 state에 information이라는 배열을 만들고, 그 안에 샘플 데이터 두 개를 추가할 것이다. 각 전화번호는 다음과 같은 형식으로 담긴다. { id: 0, name: '이름', phone: '010-0000-0000' } 여기서 id는 각 데이터를 식별하기 위해 사용되는 고유값이다. 수정 및 삭제 기능을 구현할 때 필요하다. 그리고 id 값은 데이터를 추가할 때마다 증가해야 하기 때문에 +1씩 더해줄 것이다. // src/App.js import React, { Component } from 'react'; import PhoneForm from './com..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째, 입력받는 컴포넌트 생성 먼저 만들 컴포넌트는 PhoneForm이다. 해당 컴포넌트에서 사용자의 이름과 전화번호를 입력받는다. 우선, src 디렉토리 내부에 'components'라는 하위 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다. // src/components/PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.valu..