9e601b8c05 · samitouri/QOS-React-2

@@ -0,0 +1,101 @@

1 +---

2 +id: update-ko-KR

3 +title: 불변성 헬퍼들

4 +permalink: update.ko-KR.html

5 +prev: clone-with-props.ko-KR.html

6 +next: pure-render-mixin.ko-KR.html

7 +---

8 +

9 +React에서는 mutation을 포함해 어떤 데이터 관리 방식도 사용하실 수 있습니다. 하지만 애플리케이션의 성능이 중요한 부분에서 불변의(immutable) 데이터를 사용할 수 있다면, 쉽게 빠른 `shouldComponentUpdate()` 메서드를 구현해 애플리케이션의 속도를 크게 향상시킬 수 있습니다.

10 +

11 +JavaScript에서 변할 수 없는 데이터를 다루는것은 [Clojure](http://clojure.org/)처럼 그것을 위해 디자인된 언어보다 어렵습니다. 하지만, React는 간단한 불변성 헬퍼를 제공합니다. `update()`는 이런 종류의 데이터를 근본적인 변화 *없이* 쉽게 다루도록 해줍니다.

12 +

13 +## 주요 아이디어

14 +

15 +만약 데이터를 이렇게 변화시킨다면:

16 +

17 +```js

18 +myData.x.y.z = 7;

19 +// or...

20 +myData.a.b.push(9);

21 +```

22 +

23 +이전의 카피가 덮어씌워진다면 어떤 자료가 바뀌었는지 알 방도가 없습니다. 대신에, `myData`의 새로운 카피를 만들고 오직 변화가 필요한 부분만 바꿀 필요가 있습니다. 그 다음 `shouldComponentUpdate()` 에서 `myData`의 이전 카피와 새로운 카피를 `===` 연산자를 사용하여 비교할 수 있습니다.

24 +

25 +```js

26 +var newData = deepCopy(myData);

27 +newData.x.y.z = 7;

28 +newData.a.b.push(9);

29 +```

30 +

31 +하지만 깊은 복사는 비싸고, 가끔은 불가능하기도 합니다. 변화가 필요한 객체만 복제하고, 변화 없는 객체를 다시 사용함으로써 완화를 시킬수는 있습니다. 안타깝지만 오늘날의 JavaScript에서는 성가실 수 있습니다:

32 +

33 +```js

34 +var newData = extend(myData, {

35 + x: extend(myData.x, {

36 + y: extend(myData.x.y, {z: 7}),

37 + }),

38 + a: extend(myData.a, {b: myData.a.b.concat(9)})

39 +});

40 +```

41 +

42 +이것은 꽤 성능이 좋긴 하지만 (`log n`개의 객체만 얕은 복사하고, 나머지는 재사용하기 때문에), 쓰기엔 큰 고통이 따릅니다. 이 반복들을 보세요! 이건 짜증날 뿐만 아니라 버그들을 야기할수도 있습니다.

43 +

44 +`update()`는 이런 패턴 속에서 코드를 더 쉽게 쓸 수 있도록 편의문법을 제공합니다. 코드는 이렇게 됩니다:

45 +

46 +```js

47 +var newData = React.addons.update(myData, {

48 + x: {y: {z: {$set: 7}}},

49 + a: {b: {$push: [9]}}

50 +});

51 +```

52 +

53 +([MongoDB 쿼리 언어](http://docs.mongodb.org/manual/core/crud-introduction/#query)에서 영감을 받은) 이 문법에 익숙해지기에는 시간이 조금 걸리긴 하지만, 쓸모 없는 반복이 없고 정적분석이 가능할 뿐더러 변할 수 있는 버전보다 더 많은 타이핑이 필요하지도 않습니다.

54 +

55 +

56 +`$`가 앞에 붙어있는 키들은 *커맨드* 라고 불립니다. "변하는" 자료 구조는 *타겟* 이라고 불립니다.

57 +

58 +## 사용가능한 커맨드들

59 +

60 + * `{$push: array}` 모든 아이템들을 타겟에 있는 `array`에 `push()`합니다.

61 + * `{$unshift: array}` 타겟속 `array`에 있는 모든 아이템들을 `unshift()`합니다.

62 + * `{$splice: array of arrays}` `arrays` 안의 각 아이템들이 `splice()`를 주어진 인자들을 사용해 호출하게 합니다.

63 + * `{$set: any}` 타겟 전체를 대체합니다.

64 + * `{$merge: object}` 타겟과 `object`의 키들을 병합합니다.

65 + * `{$apply: function}` 는 지금 값을 함수에 전달하고 새로운 리턴 값으로 업데이트합니다.

66 +

67 +## 예제

68 +

69 +### 간단한 push

70 +

71 +```js

72 +var initialArray = [1, 2, 3];

73 +var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

74 +```

75 +`initialArray` 은 여전히 `[1, 2, 3]` 입니다.

76 +

77 +### 중첩된 컬렉션

78 +

79 +```js

80 +var collection = [1, 2, {a: [12, 17, 15]}];

81 +var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});

82 +// => [1, 2, {a: [12, 13, 14, 15]}]

83 +```

84 +이것은 `collection`의 인덱스 `2`의 키 `a`에 접근해, 인덱스 `1`에 있는 한 아이템을 접합(splice)해서(`17`를 제거하고) `13`, `14`를 추가합니다.

85 +

86 +### 현재 상태에 의거해 값을 업데이트

87 +

88 +```js

89 +var obj = {a: 5, b: 3};

90 +var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});

91 +// => {a: 5, b: 6}

92 +// 위의 것과 같은 동작을 합니다만, 깊게 중첩된 컬렉션들에서는 더 장황해 집니다.

93 +var newObj2 = update(obj, {b: {$set: obj.b * 2}});

94 +```

95 +

96 +### (얕은) 합병

97 +

98 +```js

99 +var obj = {a: 5, b: 3};

100 +var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}

101 +```

translate 10.6-update.ko-KR.md