[React] 배열인 state에 값 추가, 제거

내용

state가 배열인 경우에 어떻게 값을 추가하고, 제거하는지 알아보기

 

배열에 값 추가

전개 연산자(Spread Operator)를 사용해 기존에 지정되어 있던 state를 배열에 담고, 해당 배열 뒤에 값을 추가한 새 배열을 state에 지정하면 됩니다.

배열 안의 값이 string인 경우

// state 기본값: ["A", "B"]
const [arr, setArr] = useState(["A", "B"]);

// state에 "C" 추가
setArr(prevList => [...prevList, "C"]);

// 결과: ["A", "B", "C"]
console.log(arr);

배열 안의 값이 object인 경우

// state 기본값: [{word: "A"}, {word: "B"}]
const [arr, setArr] = useState([{word: "A"}, {word: "B"}]);

// state에 "C" 추가
setArr(prevList => [...prevList, {word: "C"}]);

// 결과: [{word: "A"}, {word: "B"}, {word: "C"}]
console.log(arr);

 

배열에서 값 제거

기존에 지정되어 있던 state에 filter 함수를 사용해 특정 값을 삭제한 새 배열을 state에 지정합니다.

배열 안의 값이 string인 경우

// state 기본값: ["A", "B", "C"]
const [arr, setArr] = useState(["A", "B", "C"]);

// state에서 "C" 제거
setArr(arr.filter(word => word !== "C"));

// 결과: ["A", "B"]
console.log(arr);

배열 안의 값이 object인 경우

// state 기본값: [{word: "A"}, {word: "B"}, {word: "C"}]
const [arr, setArr] = useState([{word: "A"}, {word: "B"}, {word: "C"}]);

// state에서 "C" 제거
setArr(arr.filter(obj => obj.word !== "C"));

// 결과: [{word: "A"}, {word: "B"}]
console.log(arr);

 

레퍼런스

• 전개 구문 - JavaScript | MDN