상태로 저장하고 있는 배열의 내부를 수정한 후 setState를 해주었을 때 왜 렌더링이 실행되지 않는지...?
setState(state)
setState((prevState) ⇒ prevState)
setState([...state])
리액트에서는 불변성 유지가 중요함
불변성을 유지해야 필요한 상황에 리렌더링 되도록 설계가 가능하고 성능도 최적화할 수 있다.
따라서 리액트의 state 내부의 값을 직접적으로 수정하면 절대!!! 절대 안됨 (왜!!왜요!!)
대신 기존의 배열에 기반해 새 배열을 만들어내야한다.
데이터 추가
setState(arr.concat({ id: , ...}))
JavaScript
복사
데이터 제거
arr = [1, 2, 3, 4, 5] // 3을 제거해야한다면
arr.slice(0, 2).concat(arr.slice(3))
[...arr.slice(0, 2), ...arr.slice(3)]
arr.filter((el) => el !== 3)
JavaScript
복사
데이터 수정
const modifiedArray = array.map(item => item.id === 1 ?
({ ...item,. text: 'Korea' }) : item)
JavaScript
복사
컴포넌트의 상태가 업데이트 되면, 컴포넌트의 리렌더링이 발생하게 되고, 컴포넌트가 리렌더링되면 그 컴포넌트의 자식 컴포넌트도 리렌더링됩니다.
→ 읽고 정리