[React] useState 배열, 객체 수정

state는 한 컴포넌트의 상태를 나타내는 것으로,
한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며 컴포넌트 안에서 데이터를 변경 가능하게 한다.

리액트의 함수 컴포넌트에서 state를 사용하기 위해서는 useState라는 hook을 사용해야 한다.

 

useState는 state 변수의 초깃값을 매개변수로 전달하여 호출하고, 결괏값으로 배열을 반환한다.

그 배열은 [초기값이 들어간 변수, 값 변경이 가능한 함수]로 이루어져 있다.

그래서 useState hook을 사용할 때는 구조 분해 할당을 사용하여 변수에 값을 넣어준다.

const [count, setCount] = useState(0);

만약 state 형태가 배열이거나 객체라면,
값 추가 및 수정시 알아야 할 것들이 있다.

 

값 추가 시, spread 연산자를 사용하여 배열 및 객체를 복사한 후 새로운 값을 추가한다.

const [arr, setArr] = useState([]);
setArr(oldArr => [...oldArr, newArrValue]);

const [obj, setObj] = useState({});
setObj(oldobj => {...oldObj, newKey:{newValue}})

값 수정 시, 임시 배열을 만들어 기존 배열 복사 후, 값을 수정하고 set 함수를 사용해 할당한다.

const [data, setData] = useState([]);

let tmp = [...data];
tmp[0] = "newValue";
setDate(tmp);