react의 useState 후크는 놀라운 작업을 수행하며 다양한 데이터 유형의 변수를 조작하는 데 사용할 수 있습니다.

그러나 조작하기 가장 까다로운 것은 아마도 배열 유형일 것입니다. javascript에서 배열을 푸시하고 제거하고 편집하는 것은 다소 간단하지만 useState를 사용하면 특히 상태에 대한 반응의 모범 사례를 따르는 경우 약간 복잡해집니다.

상태인 배열을 추가, 제거 및 편집하기 위해 이러한 모범 사례를 수행하는 방법을 살펴보겠습니다.

미는

이것은 대부분 간단하고 대부분의 개발자가 올바르게 수행합니다. 다음과 같이 이전 상태를 사용하고 이전 요소 뒤에 요소를 추가하기만 하면 됩니다.

setFruits(prev => [...prev, 'apple'])

풀이

제거는 복잡해지는 곳입니다. 수년 동안 나는 많은 개발자들이 이것을 달성하기 위해 모든 종류의 비 모범 사례 '해킹'을 사용하는 것을 보았습니다. useState에 대한 모범 사례가 아닌 스택 오버플로에 대한 매우 인기 있고 수용된 답변도 있었습니다. 일반 javascript array.splice()를 수행한 다음 setState(prev => [...prev])로 상태를 업데이트할 것을 제안했습니다. 안좋다!

이 모든 솔루션은 확실히 작동했지만 react의 모범 사례를 따르고 싶다면 배열에서 제거하는 방법은 다음과 같습니다.

해결책

아이디어는 반응에서 setState의 상태를 절대 변경하지 않는 것입니다. 따라서 항상 이전 값을 사용해야 합니다. 따라서 반응 중인 상태 배열에서 요소를 제거하는 작업은 다음과 같이 수행되어야 합니다.

let elementToRemove = 'orange'
setFruits(prev => prev.filter(fruit => fruit !== elementToRemove ))

자바스크립트 메서드를 사용하거나 상태를 변경하지 않고 한 줄에 원하는 요소를 제거할 수 있습니다.
직접 테스트해볼 수 있습니다!

결론

상태 배열에서 요소를 제거하는 것은 간단하고 한 줄로 수행되지만 모범 반응 사례를 따르기 위해서는 상태를 변경하지 않고 신중하게 수행해야 합니다.