React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

react는 setState로 state관리를 한다.

불변성을 지켜야하기때문에 아래와 같이 사용했는데

this.setState({
	value : this.state.value
});

리액트 로직이 기존 state와 새로운 state를 비교하여 재 렌더링하기 때문에 참조형인 array, object 같은 경우에는 주의해야한다.

 

이때 배열에 push하게 되면 기존 참조된 배열에 push가 되기 때문에 기존 state와 새로운 state는 같아진다.

따라서 아래와 같이 새로운 배열을 set해줘야한다.

this.setState({
    array : [...this.state.array, {
        val : this.state.value
    }]
});

그리고 setState할때 과거의 state값을 사용해야하는 경우가 있는데, 아래와 같이 한다.

this.setState((prevState) => {
    array : [...prevState.array, {one : value, name : 'gaga'}]
});

prevState를 파라미터로 받아서 처리해줄 수 있다.