[TIL] React의 update()
대략 리액트에 update
라는게 포함되었다는 말 같다
update
를 사용하는 이유는 깊은 곳에 있는 객체를 원본을 훼손하지 않고 변경하기 위함인듯 하다.
리액트 공식문서에 나온 예시를 보면
const newData = extend(myData, {
x: extend(myData.x, {
y: extend(myData.x.y, {z: 7}),
}),
a: extend(myData.a, {b: myData.a.b.concat(9)})
});
위와같은 상황에서 update
를 사용하면
import update from 'react-addons-update';
const newData = update(myData, {
x: {y: {z: {$set: 7}}},
a: {b: {$push: [9]}}
});
아래와 같이 간단하게 사용이 가능한 듯.
사용할 수 있는 명령어와 공식문서에 나온 예시로 마무리
Available Commands
$push: array
-> push() all the items in array on the target.
$unshift: array
-> unshift() all the items in array on the target.
$splice: array of arrays
-> for each item in arrays call splice() on the target with the parameters provided by the item.
$set: any
-> replace the target entirely.
$merge: object
-> merge the keys of object with the target.
$apply: function
-> passes in the current value to the function and updates it with the new returned value.
Examples
- push
const initialArray = [1, 2, 3];
const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
//initialArray is still [1, 2, 3].
- splice
const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
// => [1, 2, {a: [12, 13, 14, 15]}]
- apply, set
const obj = {a: 5, b: 3};
const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
// => {a: 5, b: 6}
const newObj2 = update(obj, {b: {$set: obj.b * 2}});
// 더 간단하게 구현...(같은 결과)
- merge
const obj = {a: 5, b: 3};
const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
Author And Source
이 문제에 관하여([TIL] React의 update()), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@choice/비공개-TIL-Immutability-Helpers저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)