[Reacte] Array와 shouldComponentUpdate()

reacte에서 배열에 값을 추가하는 방법은 두가지가 있는 것이에요.

// 첫번째 방법

var arr = [1, 2];
arr.push(3);	// 3을 배열에 넣어준다.

console.log(arr);				// 결과는 (3) [1, 2, 3]


// 두번째 방법

var arr = [1, 2];
var result = arr.concat(3);

console.log(result)			// 결과는 (3) [1, 2, 3]

console.log(arr)			// 결과는 (2) [1, 2]

push는 원본(원래 배열)을 바꾸는 기능을 가지고 있고, concat은 원본을 바꾸지 않는 것이에요.

결국 concat은 새롭게 만들어진 배열을 반환하는 것이에요.

 

State에서 값을 추가할 때는 push와 같이 원본을 변경하는 것을 쓰면 안 좋은 것이에요.

이 때는 concat을 사용하여 새로운 Data를 만드는 방법을 쓰는 것이 좋답니다!

이유는 나중에 성능 개선[shouldComponentUpdate() 사용]을 할 때, 원본 Data를 바꾸게 되면 굉장히 까다로워지는 단점이 있기 때문인 것이에요.

 

 

 

shouldComponentUpdate()란?

 

어떤 컴포넌트의 render()가 자신이 다시 호출될 필요가 없음에도 호출되는 것을 막기 위해 사용하는 것

 

위 함수의 반환값이 True이면 render가 호출되고, False이면 render는 호출 되지 않는 것이에요.

 

 

또한 위 함수는 새롭게 변경된 값과 이전 값에 접근할 수 있는 것이에요.

단, push를 사용해서 원본 Data를 변경해 버리면 새롭게 변경된 값만 알 수 있는 것이에요.

 

이것을 활용하여 컴포넌트의 data가 변경 되었을 때는 render가 호출되게 하고, 변경 되지 않았을 때는 호출되지 않게 만들 수 있는 것이에요.

 

Array.from()		// 기존 배열을 복제하는 기능

반응형

var a = {name : 'junyharang'};
var b = Object.assign({//빈 객체를 줘도 되고, 새로운 객체를 줘도 된다.}, a);			// 기존 객체를 복제할 때 사용

console.log(a, b, a===b);					// 결과 {name : "junyharang"}   {name : "junyharang"}    false