[React] setState로 배열(array)와 객체(object) state 변경하기

참고 링크 : 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});
}