리액트에서 불변성이 필요한 이유

불변성

메모리 영역의 값을 변경할 수 없는 것

 

리액트의 불변성을 지켜야하는 이유는 다음과 같습니다.

 

1. 효율적인 상태업데이트(얕은 비교 수행)

리액트는 상태비교 시, 얕은 비교를 수행(이전 참조값과 현재 참조값만 비교)(객체의 모든 부분을 비교하는 것이 아님)

=> 따라서 계산 리소스 줄여줌

const App = () => {
	const [state, setState] = useState({})
 
 	const handleClick = (key, value) => {
        // 얕은 비교를 수행
        setState({
		    ...state,
	        [key]: value
		})
	}
    
    return <div onClick={() => handleClick(key, value)}>{state}</div>
}

 

 

원시타입은 바로 값을 setState에 넣어줘도 되지만,

참조타입인 객체의 경우, 새로운 객체나 배열을 생성한 후 값을 넣어야합니다.

// 원시타입
const [number, setNumber] = useState(0)
setState(3)

// 참조타입
const [person, setPerson] = useState({ name: '', age: 30 })
setState({...person, name: 'pyo'})

spread operator, map, filter, slice, reduce 메소드들을 활용

 

 

2. 원본데이터를 바꾸지 않아서 => 사이드이펙트 사전 방지, 프로그래밍 구조 단순하게 유지가능

참고: 클래스 컴포넌트와 함수형 컴포넌트의 불변성을 지키는 방법

 

count 값이 3초 뒤 변경되더라도, 해당 값을 컴포넌트의 인스턴스 변수인 this.state.count에 유지

따라서 render 메소드에서는 this.state.count를 참조할 때, 값이 초기화하지 않고 변경된 값인 1이 출력

class Example extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    // 3초 후 count 값 변경
    setTimeout(() => {
      this.setState({ count: 1 });
    }, 3000);
  }

  render() {
    console.log('render count:', this.state.count);
    return (
      <div>{this.state.count}</div>
    );
  }
}

 

만약 함수형 컴포넌트에서 상태의 초기화를 방지하고, 함수형 컴포넌트 내부에서 유지할 수 있게 해주는 useState 같은 훅을 사용하지 않는다면

count 변수를 직접 수정하고, handleClick이 실행될 때마다 count 변수가 다시 0으로 초기화되므로

아무리 handleClick을 실행시켜도 count는 항상 1입니다.

import React from 'react';

function Counter(props) {
  let count = 0;

  function handleClick() {
    count++;
    console.log(count);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

 

 

참고

https://hsp0418.tistory.com/171