멘토 바꾸기/추가하기/삭제하기(useState)

중첩 객체,배열 상태 관리

<샘플>
const[person,setPerson] = useState(initialPerson);
const initialPerson = {
	name: "엘리",
	title: "개발자",
	mentors: [
    	{
			id: "001",
			name: "밥",
			title: "시니어개발자",
		},
		{
			id: "002",
			name: "제임스",
			title: "주니어개발자",
		},
	],
};

react에서는 객체 내부값을 수정해도 동일한 객체로 인식하기 때문에,
상태값이 업데이트 되지 않는다.
때문에 상태값을 업데이트 하려면 객체 내부값이 아니라 해당 객체를 수정해야한다.

<예시>
person.mentors[0].name = current;
//person안에 mentors배열에서 첫번째 객체의 name값만 current로 교체
setPerson(person)
//상태값 업데이트 요청

=>객체 내부값만 바뀐거라서 업데이트 되지 않음

1.멘토 이름 바꾸기

1.prompt를 통해 바꾸고 싶은 이름과 새로운 이름값을 받아온다.
2.spread 문법을 사용하여 기존 객체값을 불러오고,
3.mentors 배열을 map함수를 이용하여 반복문을 적용하고,
3.if문 또는 삼항연산자를 사용하여 반환(return)되는 객체 값중에 해당하는 이름만 수정되도록 설정

const choice = prompt("누구를 바꾸고 싶은가요?");
const name = prompt("새로운 멘토의 이름을 적어주세요");
setPerson((person) => ({
	...person,
    mentors: person.mentors.map((item) => {
    // if (item.name == choice) {
    // 	return { ...item, name };
    // }
    // return item;
    return item.name == choice ? { ...item, name } : item;
    }),
}));

2.멘토 추가하기

1.prompt를 통해 추가하려는 멘토의 이름과 타이틀값을 받아온다.
2.spread 문법을 사용하여 기존 배열을 나열하고 앞 또는 뒤에 추가하려는 객체값을 넣는다

const name = prompt('추가하려는 멘토의 이름은?');
const title = prompt('추가하려는 멘토의 타이틀은?');
setPerson((person)=>({
	...person,
    mentors:[...person.mentors,{name,title}],
}));

3.멘토 삭제하기

1.prompt를 통해 삭제하려는 멘토의 이름값을 받아온다.
2.spread문법과 filter함수를 사용하여 해당 name에 해당하지 않는 멘토만 보여지도록 설정