React에서의 불변성(Immutability)

1. 불변성

- 변하지 아니하는 성질.

- 공간 좌표의 반전, 시간 반전, 회전, 로런츠 변환 따위의 특정한 변환이나 연산으로도 변화하지 않는다고 하는, 물리량이나 물리 법칙이 갖는 성질

2. JavaScript에서

• 원시타입의 값들은 불변성을 가지고 있음
  • string, number, bigint, boolean, undefined, symbol, null
  • 모든 원시 값은 불변하여 변형할 수 없음 (https://developer.mozilla.org/ko/docs/Glossary/Primitive)
• 참조형 값들(객체, 배열, 함수 등) 은 다르게 동작
  • number가 참조하고 있는 apple의 주소 값은 변경된다.
  • 복사되는 것이 아닌 참조값을 갖게되기 때문에, 사본을 수정하게 되면 원본도 수정됨

  let string = 'data1' // 1. string: 'data1'가 메모리 영역1에 등록
  string = 'data2' // 2. string: 'data2'가 메모리 영역2에 등록
  

  • string 변수는 'data1' → 'data2' 로 값이 변경된 것처럼 보이지만 실제 메모리영역에는 'data1', 'data2' 둘다 존재
  • 즉, 메모리영역에서 'data2'는 'data1'을 대체하는 것이 아니라 새로운 영역에 할당됨

  let array = [1, 2, 3, 4] // 메모리영역 1
  array.push(5) // 메모리영역 1 (불변X)
  
  array = [1, 2, 3, 4] // 메모리영역 2 (새로운 참조값) (불변O)
  

  • array.push(5)는 원본데이터를 수정함으로써 불변성을 지켜주지 않은 것
  • array = [1, 2, 3, 4] 는 새로운 배열 [1, 2, 3, 4]을 할당하고 새로운 참조값을 만들어주어 불변성을 지켜준 것
• const Obj = { word: 'apple' } Obj.word = 'banana'

2. React 에서

• 리액트에서 불변성을 지켜주는 이유 : React의 상태 업데이트를 하는 원리
  • React는 상태 값을 업데이트할 때, 얕은 비교를 수행
  • 객체의 속성 하나하나를 비교하는 것이 아닌, 참조값만 비교하여 상태 변화를 감지
    • 배열이나 객체를 업데이트할 때, setState를 사용배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 해야하고, 업데이트 하는 과정에서 기존의 객체의 값을 직접적으로 수정하면 안됨
    • ⇒ 불변성을 지켜주는 것
    • setState([...state, newState]), setState({...state, [key]: value})

⇒ 결국 리액트는 불변성을 지킴으로 인해 효과적인 상태 업데이트와 사이드 이펙트를 방지

• 불변성을 지키기 위해서
  • spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용
  • setState를 이용할 때 원시타입 경우에는 값을 바로 넣어주어도 되지만
  • 참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 함
  • Immutable.js
• Hook
  • Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
  • Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것
    • useState, useEffect, useContext, useMemo , … 내장 훅
      1. 최상위(at the Top Level)에서만 Hook을 호출해야 한다.
      • 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않아야 한다.
      • 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 이러한 점은 React가 useState와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해준다.
      1. 오직 React 함수 내에서 Hook을 호출해야 한다.
      • 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있다.

 

참고 : React에서의 Immutability

React에서의 Immutability