배열 요소 추가 삭제 (불변성 유지)

Tags
concat
splice
map
요약

상태 배열 불변성 유지하며 수정하기

리액트애서는 state 내부의 값을 직접적으로 수정하면 절대로 안됨. 이를 불변성 유지라고 한다.
  • push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하므로 적절하지 않음.
  • 기존 배열로 새 배열을 반환하는 concat, slice, map, filter 같은 함수를 써야함.
 

1) 배열요소 추가 (concat)

const InitUser = {name:"", price:0};
const [equipmentList, setEquipmentList] = useState([InitUser,]);

...

return(
	<TouchableOpacity style={styles.buttonAdd} 
		onPress={()=>{setEquipmentList(equipmentList.concat(InitUser))}}>
	    <Entypo name="plus" style={styles.buttonText} />
	</TouchableOpacity>
);
 

2) 배열 요소 수정

 

3) 배열 요소 삭제 (filter)

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
배열 요소들을 forEach로 돌면서 일일이 걸러내는듯.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

//배열요소에서 길이가 6자리 초과한 문자열만 반환
const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]