객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드는 어떤게 있을까?

객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드는 어떤게 있을까?

 

1) 배열

위에서 말했듯이, 불변성이 없는 데이터이다보니 값이변했을때 리렌더링하기위해 불변성을 지켜주며 값을 바꿔야한다.

 

1) 배열 값 추가하기

배열 값을 변경할 때에는 불변성을 지켜줘야한다. 배열의 push, splice, sort등의 함수를 사용하면 안된다.

배열을 수정하는 방법에는 2가지가 있다. spread operator(...), concat()을 사용하는 방법이다.

 

먼저 spread operator

setUsers([...users, newUser]);

기존의 배열을 수정하지 않고, 새로운 요소가 추가된 배열을 만들어내는 방식이다.

 

concat()함수 사용

setUsers(users.concat(user));

호출한 배열 뒤에 인자로 받은 값들을 순서대로 붙여 새로운 배열을 만들어 반환한다.

인자로 배열을 넣으면 배열 요소 순서대로 호출한 배열 뒤에 붙여 반환한다.

array.concat([value1[, value2[, ...[, valueN]]]])

 

 

 

 

2) 배열 값 제거하기

불변성을 지키면서 배열의 값을 제거하기위해선 배열의 내장함수인 filter을 사용한다.

filter는 특정 조건에 true를 반환하는 요소들만 뽑아내 새로운 배열을 반환한다.

setUsers(users.filter(user => user.id !== 3));

users배열속 키가 id인 속성들의 밸류가 3이 아닌 것들만 추려내 새로운 배열을 만든다.

 

 

 

3) 배열 값 수정하기

불변성을 지키면서 배열의 값을 수정할 때에는 map함수를 사용한다.

map함수는 호출한 배열의 각 요소를 인자로 받아 콜백함수를 실행한 후, 실행된 결과값을 요소로 하는 새로운 배열을 반환한다.

const func = id => {
	setUsers(users.map(user => {
		user.id !== id ? {...user, active: !user.active} : user;
	});
)

키가 id인 배열의 밸류값이 id와 일치하지 않는 경우 user배열을 불러와 active : !user.active를 추가하여 반환하는 것이고,

일치하는 경우 user을 반환하는 것이다.

그것을 setUsers로 바꿔 state값을 변경한다.