<aside> 💡 불변성이 있다는 뜻은 메모리에 있는 값을 변경할 수 없는 것.
자바스크립트에서 원시 데이터는 불변성이 있다.
객체, 배열, 함수는 불변성이 없다.
</aside>
<aside> 💡 리엑트의 렌더링 시점은 state의 변화를 확인하는 시점이다.
따라서 state가 변했는지 확인하는 방법은 state가 가진 메모리의 주소가 바뀌었냐는 시점이다.
따라서 spread연산자, map, filter 등 값을 복사하고 그 값을 수정하는 방식으로 state를 변경.
불변성 지키기 예시
import React, { useState } from "react";
function App() {
const [dogs, setDogs] = useState(["말티즈"]);
function onClickHandler() {
// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다.
// 그리고 나서 항목을 추가합니다.
setDogs([...dogs, "시고르자브르종"]);
}
console.log(dogs);
return (
<div>
<button onClick={onClickHandler}>버튼</button>
</div>
);
}
export default App;
</aside>
<aside> 💡 순수함수란?
아래 개념들을 가지고 있는 함수로 즉 동일한 인자가 전달되면 항상 동일한 결과를 리턴해주는 함수
순수함수 예시
// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
// 펼침 연산자로 새로운 배열에 6 추가
newArr = [...arr, 6];
return newArr;
};
순수함수가 아닌 예시
const num_arr = [1, 2, 3, 4, 5];
// 매개변수의 값을 직접 변경하는 불순함수
const addSixImpure = (arr) => {
// 매개변수에 직접 6 추가
arr.push(6);
return arr;
};
리액트에서 순수함수의 중요성
아래 루틴을 통해 UI 개발의 복잡도를 낮추고 버그 발생 확률도 줄인다.