React- state 변경 feat. 불변성

교내 소프트웨어융합대학 학술제에서 프론트를 맡아서 공부한 것들을 정리해보았다.

불변성

let array=[1,2,3,4] //메모리 영역1
array.push(5) //메모리 영역1. 원본 데이터 수정 -> 불변성 지켜주지 x

arrya=[1,2,3,4] //메모리 영역2=> 새로운 배열 할당.

불변성: 메모리 영역에서 값을 변경할 수 없다!!

왜 리엑트에서 불변성을 지켜야 하나?

상태 업데이트 원리 때문!

react는 상태값을 업데이트 할 때 얕은 비교를 수행한다. 객체의 속성 하나하나를 비교하는 게 아니라 참조값만 비교하여 상태 변화를 감지한다. 이런 이유로 배열이나 객체를 업데이트할 떄 setState([..state,newState]) 와 같이 배열이나 객체를 새로 생성⇒새로운 참조값 생성⇒ 상태 업데이트 를 한다.

이런 행위가 불변성을 지켜주는 것이다. 이렇게 불변성을 지켜줌으로써 얻게 되는 이점

• 사이드 이펙트 방지

어떻게 불변성을 지키는가?

spread operator, map, filter, slice, reduce 등등 새로운 배열을 반환하는 메소드들을 활용하면 된다.

(splice는 원본데이터를 변경함)

setState를 이용할 때 원시타입인 경우에는 값을 바로 넣어주어도 되지만 참조타입인 경우에는 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다.

 

원시타입: 숫자, 문자열, 논리형, null, Undefined

참조타입: 함수, 배열, 객체

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

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

배열 값 추가하기

배열 값을 변경할 때는 객체와 마찬가지로 불변성을 ****지켜주어야 한다.

배열의 불변성을 지키면서 원소가 추가된 새로운 배열을 만드는 방법

 

…inputs 과 같은 스프레드 함수 사용

setUsers([...users, user]);

concat

setUsers((users.concat(user));

 

참고

https://hsp0418.tistory.com/171