리액트의 불변성, state

리액트에서 state 값을 직접 바꾸면 안된다!

const [nums, setNums] = useState([1, 2, 3])

function onChange() {
    //nums.push(4) ----> 이거 아님!!!
    
    const newNums = [...nums, 4];
    setNums(newNums);
}

nums.push() 이런 식으로 직접 확 바꿔버리면 안된다! 직접 바꾸면 리액트가 state 값이 바뀌었다는 것을 인지하지 못한다.

리액트에서는 예전 state와 현재 state가 다르면 렌더링을 한다. 렌더링의 기준이 예전 state, 현재 state가 같냐 다르냐는 것이다.

그리고 예전 state 값을 가지고 지금의 state를 만들려고 할 때는 아래처럼 화살표 함수 모양의 setState를 사용하자.

setNums(prevState => [...prevState, 4])
//high order function, 1급함수