리액트에서 불변성을 지키는 이유
불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는 것을 의미한다.
React가 불변성을 지키는 이유는 부모 컴포넌트가 re-rendering 되거나 State, Props 에 변화가 일어난 경우 렌더링이 일어나게 된다.
- 참조 타입(array 등)에서 객체나 배열의 값이 변할 때 원본 데이터가 변경 되어서 이 원본 데이터를 참조하고 있는 다른 객체에서 오류가 발생 할 가능성이 있기 때문에 프로그래밍의 복잡도가 올라간다.
- 리액트에서 화면을 업데이트할 때 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기때문에 불변성을 지켜줘야 합니다.
불변성을 지키는 방법
- 참조타입을 변경하는 것이 아닌, 새로운 배열을 반환하는 메소드를 사용
- 스프레드 문법,
map,filter,slice,reduce등 - 원본 데이터를 변경하는 메소드 :
splice,push
// 원시타입
const [number, setNumber] = useState(0)
setState(1)
// 참조타입
const [numberarray, setNumberarray] = useState({1, 2, 3, 4})
setState({...numberarray, 5}
참조
https://gusehd66.tistory.com/entry/React-React가-불변성을-지키는-이유?category=1216213
https://www.inflearn.com/course/따라하는-리액트/unit/119864?tab=curriculum
반응형