[React] 함수형 프로그래밍 핵심 개념 - 불변성

함수형 프로그래밍의 핵심 개념인 불변성은 데이터는 결코 바뀌지 않는 특징이다.

🧐 불변성이란?

    원본 데이터 구조를 변경하는 대신 그 데이터의 구조의 복사본을 만들고, 그 중 일부를 변경한다

    그리고 원본 대신 변경한 복사본을 사용해 필요한 작업을 진행한

 

예시 (객체)

 

1) 불변성을 만족하지 못하는 코드

  let color_tshirt = {
      title: "후드티",
      color: "#00FFF",
      rating: 0
  }

  function rateColor(color, rating) {
      color.rating =rating
      return color
  }

 

rateColor 함수 안에서 color의 rating을 변경하면 원본 color_tshirt 객체의 rating도 바뀔 것이다. 즉 불변성을 만족하지 못한다.

 

2) 불변성을 만족하는 코드

  let color_tshirt = {
      title: "후드티",
      color: "#00FFF",
      rating: 0
  }

  const rateColor = (color, rating) =>
      ({
          ...color,
          rating
      })

 

객체 스프레드 연산자(...)를 사용해 복사된 객체를 만들어준 후 rating 프로퍼티를 덮어 사용 할 수 있다. 즉 불변성을 만족한다.

​

예시 (배열)

 

1) 불변성을 만족하지 못하는 코드

  var addColor = function(title, colors){
      colors.push({title: title})
      return colors;
  }

 

Array.push를 사용해 배열에 요소를 추가시켰는데, Array.push는 불변성 함수가 아니기 때문에, 불변성을 만족하지 못한다.

Array.push 대신 Array.concat을 사용해 불변성을 만족하는 함수를 만들어 줄 수 있다.

 

2) 불변성을 만족하는 코드

  ///Array.concat 사용
  const addColor = (title, array) => array.concat({title})

  ///배열 스프레드 연산자 사용
  const addColor = (title, list) => [...list, {title}]

 

👍 불변성에 만족 할 수 있도록 만들어주자!

ES6 이상의 버전에서 사용 할 수 있는 스프레드 연산자(...)를 사용해 불변성에 만족 할 수 있도록 해주자.