React에서 가장 많이 사용하는 훅 중 하나인 useState의 setState 함수를 이용하여 array, object의 상태를 변경해보자.
정말 많이 사용하기 때문에 쉽게 쓸 법 한데 이번에 사용하려니까 또 헷갈려서 한번 정리할 필요를 느꼈다.
1. array 상태 변경(값 추가)
const [array, setArray] = useState([1, 2, 3]);
//-> array: [1, 2, 3]
setArray([...array, 4]);
//-> array: [1, 2, 3, 4]이렇게 spread operator를 사용한다.
2. object 상태 변경(값 변경)
const [object, setObject] = useState({'id': 0, 'name': '고길동' });
//-> object: {'id': 0, 'name': '고길동'}
setObject({...object, 'name': '홍길동'});
//-> object: {'id': 0, 'name': '홍길동'}3. object 상태 변경(값 추가)
const [object, setObject] = useState({'id': 0, 'name': '고길동' });
//-> object: {'id': 0, 'name': '고길동'}
setObject({...object, 'age': 20});
//-> object: {'id': 0, 'name': '고길동', 'age': 20}3. object array 상태 변경(값 추가)
const [objectArray, setObjectArray] = useState([{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '이순신'}]);
//-> objectArray: [{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '이순신'}]
setObjectArray([...object, {'id': 3, 'name': '임꺽정'}]);
//-> objectArray: [{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '이순신'}, {'id': 3, 'name': '임꺽정'}]4. object array 상태 변경(값 변경)
const [objectArray, setObjectArray] = useState([{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '이순신'}]);
// id가 2인 object의 이름을 '강감찬'으로 변경하기
//-> objectArray: [{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '이순신'}]
setObjectArray(objectArray.map((item) => item.id === 2 ? {...item, 'name': '강감찬'} : item));
//-> objectArray: [{'id': 1, 'name': '홍길동'}, {'id': 2, 'name': '강감찬'}]