react] typescript: field as keyof typeof updated[number]

해주신 TypeScript 코드는 **폼 입력값을 처리하는 함수(handleInputChange)**로, 특정 섹션의 특정 인덱스 항목의 특정 필드를 수정한 뒤 상태(state)를 업데이트하는 기능을 합니다. 문법과 구조를 단계별로 설명드릴게요.

---

🔷 함수 전체 구조

export const handleInputChange = (
  section: string,
  index: number,
  field: string,
  value: string,
  dataMap: {
    [key: string]: {
      data: { year: string; type: string }[];
      setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>;
    };
  }
) => { ... };

✅ 함수 이름 및 export

• export const handleInputChange = (...) => { ... }
  → handleInputChange라는 이름의 **화살표 함수(Arrow Function)**를 선언하고 외부에서 사용할 수 있도록 export하고 있습니다.

---

🔶 매개변수(Parameter) 설명

매개변수 타입 설명

section	string	수정할 데이터 섹션의 이름 (예: "education", "career" 등)
index	number	배열 내 수정할 항목의 인덱스
field	string	수정할 항목의 속성명 ("year" 또는 "type" 등)
value	string	변경할 값
dataMap	{ [key: string]: { data: ..., setData: ... } }	각 섹션별로 데이터 배열과 상태 변경 함수가 들어 있는 객체

예시 dataMap 구조

{
  education: {
    data: [{ year: "2022", type: "high school" }],
    setData: setEducation
  },
  career: {
    data: [{ year: "2021", type: "internship" }],
    setData: setCareer
  }
}

---

🔷 함수 본문 설명

const target = dataMap[section];
if (!target) return;

• section 키에 해당하는 데이터를 dataMap에서 꺼냅니다.
• 해당 section이 없으면 아무것도 하지 않고 종료합니다.

---

const updated = [...target.data];

• 데이터를 **불변성 유지(immutable update)**를 위해 복사합니다. (기존 배열을 직접 수정하지 않음)

---

if (updated[index]) {
    updated[index][field as keyof typeof updated[number]] = value;
}

설명

• updated[index]가 존재하는 경우에만 실행합니다.
• field as keyof typeof updated[number]:
  • updated는 배열이므로 updated[number]는 배열의 요소 타입인 { year: string; type: string }입니다.
  • 즉, field가 "year" 또는 "type"이라는 가정 하에 타입을 안전하게 단언(cast)합니다.
• 해당 필드의 값을 value로 업데이트합니다.

---

target.setData(updated);

• setData를 호출하여 상태(state)를 갱신합니다. (useState의 setState 함수)

---

✅ 요약

이 함수는 다음과 같은 동작을 합니다:

1. dataMap에서 섹션(section)에 해당하는 데이터를 꺼냄
2. 해당 섹션이 존재하면 데이터를 복사
3. 복사한 배열의 특정 인덱스 항목에서 지정된 필드(field)를 value로 수정
4. setData를 호출하여 해당 섹션의 상태를 갱신

---

✅ 예시 사용

handleInputChange("education", 0, "year", "2023", dataMap);

→ dataMap["education"].data[0].year 값을 "2023"으로 바꾸고, setData로 반영합니다.

---

궁금한 부분이나 field as keyof의 타입 단언 부분이 더 궁금하시다면 추가로 설명드릴 수 있습니다!