아래 내용은 생활코딩님의 강의 내용을 학습한 후 작성한 내용입니다.
데이터 추가 시(Immutable)
앞선 글에서 언급했다싶히 state에 기록한 데이터를 직접적으로 변경하는 것은 나중에 문제가 생길 가능성이 높습니다.
예를 들어 컴포넌트에 shouldComponentUpdate(newProps, newState) 함수를 쓴다면, state를 직접적으로 변경하였을 때 인자 newProps, newState가 변경을 감지하지 못합니다.
이를 해결하기 위해서는 배열이나 객체를 복제한 뒤, 복제본을 수정하여 setState()로 설정해야 하는데, 두가지 방법이 있습니다.
- 배열의 경우
- Array.from(기존배열).push(추가할 엔트리)
- [배열].concat(추가할 엔트리)
- 객체의 경우
- Object.assign({추가할 엔트리}, 기존 객체)
또는 immutable-js API를 사용하는 방법도 있습니다.
<input> value attribute
만약 아래와 같은 코드를 입력한다면 어떤 결과가 나올까요?
<input type=text value={this.props.data.title}></input>
위와 같이 처음에는 출력이 되겠지만 수정이 불가능하고, 경고가 나올 것입니다.
Warning: Failed prop type
props 자체는 read-only 모드이기 때문에 react에서는 state를 통한 접근을 권장하고 있습니다. 따라서 컴포넌트에 constructor를 통해 state 설정을 해야합니다.
constructor(props) {
super(props);
this.state = {
title: this.props.data.title,
}
}
...
<input type=text value={this.state.title}></input>이렇게해도 변경이 여전히 안될텐데, state의 직접참조는 안되기 때문입니다. 따라서 setState를 통해 글자가 입력될 때마다 변경한다면 성공적으로 구현이 될 것입니다.
{[name]: value}
ES6 최신 문법입니다. 위의 value가 변경될 때마다 setState를 호출할텐데, 만약 input이 여러개라면 어떻게 해야할까요? 예전이었다면 여러개의 setState 함수를 만들어야 했을 겁니다. 각각의 input에 대하여 변경할 state가 다르기 때문이죠.
하지만 이제는 괄호([])를 통해 동적으로 변경할 state를 설정할 수 있게 되었습니다.
window.confirm()
확인 알림을 띄워줍니다.
splice(start, deleteCount, [item...])
배열에서 start위치부터 deleteCount만큼 삭제하고, [item..]을 추가하는 함수입니다.
참고
immutable: https://reactjs.org/docs/components-and-props.html
splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
