프로그래밍/웹 개발
[React] setState로 배열(array)와 객체(object) state 변경하기
제이콥J
2021. 11. 23. 17:12
참고 링크 : https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np
배열(Array)
const [state, setState] = useState([]);
배열에 엘리먼트 추가하기
1. slice 메소드로 배열 복사 후, 엘리먼트를 추가한 뒤 setState에 넣기
const AddElement = (element) => {
const newState = state.slice(); // 기존 배열을 slice 메소드로 복사
newState.push(element); // 새 배열에 element 추가
setState(newState); // 새 배열을 setState에 입력하기
}
2. spread 연산자로 배열 복사 후, 엘리먼트를 추가한 뒤 setState에 넣기
const AddElement = (element) => {
const newState = [...state] // 기존 배열을 spread 메소드로 복사
newState.push(element); // 새 배열에 element 추가
setState(newState); // 새 배열을 setState에 입력하기
}
3. spread 연산자로 setState 내에서 엘리먼트 추가하기
const AddElement = (element) => {
setState([...state, element]);
}
배열에서 특정 엘리먼트 삭제하기
// filter 메소드로 거른 뒤에 setState에 입력
const RemoveElement = (element) => {
const newState = state.filter((el) => el !== element);
setState(newState);
}
배열에서 특정 엘리먼트 변경하기
// 새 배열을 복사하여 해당 인덱스의 엘리먼트 변경
const UpdateElement = (index, element) => {
const newState = [...state]; // slice로도 복사 가능
newState[index] = element;
setState(newState);
}
객체(Object)
const [state, setState] = useState({});
객체에 key와 value를 추가하기
1. assign 메소드로 객체 복사 후, 거기에 key:value를 추가한 뒤 setState에 넣기
const AddKeyValue = (value) => {
const newState = Object.assign({}, state) // 기존 객체 복사
newState[key] = value; // key와 value 추가
setTodos(newState); // 새 객체를 setState에 입력
}
2. spread 연산자로 객체 복사 후, 거기에 key:value를 추가한 뒤 setState에 넣기
const AddKeyValue = (value) => {
const newState = {...state} // 기존 객체 복사
newState[key] = value; // key와 value 추가
setState(newState); // 새 객체를 setState에 입력
}
3. (추천) spread 연산자로 setState 내에서 key:value 추가하기
- 위 2가지 방법에서 key에 숫자를 넣으면, 객체가 배열로 바뀌는 경우가 있음 (배열 index로 인식하는 것 같음)
- 아래 방법은 오류 없이 key:value를 추가할 수 있음
const AddKeyValue = (value) => {
setState({...state, [key]: value});
}
객체에서 특정 key:value 삭제하기
// 객체 복사 후 delete 메소드 사용
const DeleteKeyValue = (key) => {
const newState = {...state}
delete newState[key] // Object.assign 으로도 복사 가능
setState(newState);
}
객체에서 특정 key:value 변경하기
const UpdateDeleteKeyValue = (value) => {
setState({...state, [key]: value});
}
반응형