TIL // 2020.12.28-2
배열 다루기
- 리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다.
- 왜냐? 불변성을 유지해야 하기 때문
- state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함.
- 불변성을 유지해야 데이터가 필요한 상황에 따라 리렌더링이 되도록 설계할 수 있고, 그래야 나중에 성능도 최적화할 수 있음.
- 그래서 push, splice, unshift, pop같은 state를 직접적으로 변경하는 내장함수를 사용하면 안되고, 기존의 배열에 기반한 새로운 배열을 만들어내는 concat, slice, map, filter를 사용해야 함.
1. 데이터 추가하기
- App 컴포넌트에서 애플리케이션의 상태 데이터를 관리하도록 설계
- App 컴포넌트 내부에 information 이라는 배열을 만들고 배열의 기본값 두개 추가.
{
id: 0, // 각 데이터를 식별하기 위한 id값. 데이터 추가할 때 마다 1씩 오름.
name: '이름',
phone: '010-0000-0000'
}
//App.js, 전체 컴포넌트 관리 페이지
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
class App extends Component {
id = 2
state = {
information: [
{
id: 0,
name: '김지민',
phone: '010-0000-0000'
},
{
id: 1,
name: '김리액트',
phone: '010-0000-0001'
}
]
}
handleCreate = (data) => {
const { information } = this.state;
this.setState({
information: information.concat({ id: this.id++, ...data })
})
}
render() {
const { information } = this.state;
return (
<div>
<PhoneForm
onCreate={this.handleCreate}
/>
{JSON.stringify(information)}
</div>
);
}
}
export default App;
Author And Source
이 문제에 관하여(TIL // 2020.12.28-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@skwlalsl93/TIL-2020.12.28-2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
id: 0, // 각 데이터를 식별하기 위한 id값. 데이터 추가할 때 마다 1씩 오름.
name: '이름',
phone: '010-0000-0000'
}
//App.js, 전체 컴포넌트 관리 페이지
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
class App extends Component {
id = 2
state = {
information: [
{
id: 0,
name: '김지민',
phone: '010-0000-0000'
},
{
id: 1,
name: '김리액트',
phone: '010-0000-0001'
}
]
}
handleCreate = (data) => {
const { information } = this.state;
this.setState({
information: information.concat({ id: this.id++, ...data })
})
}
render() {
const { information } = this.state;
return (
<div>
<PhoneForm
onCreate={this.handleCreate}
/>
{JSON.stringify(information)}
</div>
);
}
}
export default App;
Author And Source
이 문제에 관하여(TIL // 2020.12.28-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skwlalsl93/TIL-2020.12.28-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)