[React] Immutable

📌 참고 📌

https://www.youtube.com/watch?v=SkTUocMjXTg&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=35

immutable

자유분방한 값은 때로는 혼란을 가져오고,
의도하지 않은 값의 변경은 매우 위험하기 때문에
불변을 의미하는 immutable 으로
원본을 바꾸지 않고 원본을 복제한 결과를 사용한다.
이에 모든 명령어들은 원본에 불변하게 되고 일관된 코드를 사용할 수 있게 된다.
객체는 map 배열은 list 로 다룬다.

immutable-js 라이브러리는 유사 배열, 유사 객체를 제어한다.

shouldComponentUpdate

render() 이전에 실행되는 함수로
컴포넌트의 render() 함수의 실행 여부를 결정해주는 특수한 함수이다.
처음에는 화면이 그려져야 하므로 render() 함수가 호출이 되는 것이 맞지만,
아무런 값의 변화가 없음에도 하위 render() 함수로 인해 발생되는
불필요한 페이지 전환(reload) 현상을 방지한다.

return true 는 render() 함수가 호출되고,
return false 는 render() 함수가 호출되지 않는다.

매개변수로 newProps, newState 두 값을 갖기 때문에
새로바뀐 값과 이전의 값에 접근할 수 있다.

push() 로 state에 새로운 값을 넣었다면
원본의 값이 바뀌므로 render() 함수가 실행되지 않는다.

class 컴포넌트명 extends Component {

  // newProps : 속성값이 바뀌었을 때
  // newState : state 값의 바뀌었을 때
  shouldComponentUpdate(newProps, newState){
    // this.props 값과 newProps 속성값이 같다면
    if(this.props.data === newProps.data){
      return false; // render() 함수가 호출되지 않음
    } else {
      return true; // render() 함수가 호출된다.
    } 
  }
}
render(){

push

배열에 새로운 데이터를 추가하는 방법으로 배열 원본의 값이 변경된다.

let a = [1,2];
a.push(3);
console.log(a); // [1,2,3];

concat

배열에 새로운 데이터를 추가할 때 원본을 바꾸지 않고,
복제된 원본에 데이터를 새로 추가하여 새로운 배열을 리턴한다.
리턴 된 새로운 배열을 변수에 담아 사용한다.
성능 개선에 유용하다.

let arr = [1,2];
arr.push(3); // [1,2,3]
arr.concat(3); // [1,2];
let result = arr.concat(3); // [1, 2, 3];

Array.from()

api 로 원본을 복제한 새로운 배열이 생성된다.
원본 불변의 법칙으로 원본을 복제 후 변형하여 사용한다.
push() 를 수행해도 Array.from 에는 원본을 갖고 있다.
배열인 경우에 사용된다.

let a = [1,2];
let b = Array.from(a);
console.log(a, b); // [1,2] [1,2]
console.log(a===b); // false // 내용은 같지만 서로 다르다.

b.push(3); // [1,2,3]
console.log(Array.from(a)); // [1,2]

Object.assign

Object.assign(빈 객체 | 새로운 객체 | 복제한 값을 추가할 객체, 복제할 대상)
복제된 객체를 만들 때,
객체의 내용을 바꾸지 않고 새로운 복제된 객체를 생성한다.

let a = {name: 'test'};
let b = Object.assign({}, a);
console.log(a, b); // {name: 'test'}, {name: 'test'}
console.log(a===b); // false // 내용이 같지만 서로 다르다.

Object.assign 객체에 데이터를 추가하는 방법

let b = Object.assign({region: 'korea'}, a);
{region: 'korea', name: 'test'}