147. 양식 입력 IDs 수정하기

양식 입력 IDs 수정하기

현재 MealItemForm의 적용은, 모든 MealItem <Input /> 이 똑같은 id 받으며, 이전 강의에서 보여준 코드에서 다음을 수행합니다:

<Input
	label='Amount'
        input={{
        id: 'amount',
        type: 'number',
        min: '1',
        max: '5',
        step: '1',
        defaultValue: '1',
	}}
/>

 

이 방식도 작동하지만 두 가지 주요 단점이 있습니다. 즉시 이해되지 않습니다. (따라서 불행히도 녹음 중에 미끄러졌습니다):

1. 어떤 레이블을 클릭하던 실제 MeatItem에 속한 것이 아니더라도 항상 동일한 첫 번째 입력 요소가 선택됩니다.

2. 스크린리더는 레이블 + 입력을 올바르게 연결할 수 없습니다(모든 레이블이 동일한 입력을 가리키기 때문에).

비디오에 표시된 모든 것은 표시된 대로 작동하며 이것을 수정하는 것은 선택 사항입니다, 하지만 이 문제를 수정하는 것은 쉽기 때문에 아래 조정을 고려할 수 있습니다.

한 가지 가능한 해결 방법은 IDprop을 MealItemForm에 받는 것이고 이를 사용하여 r <Input />당 고유 id 를 생성합니다:

<Input
    label='Amount'
    input={{
        id: 'amount_' + props.id, // this changed!
        type: 'number',
        min: '1',
        max: '5',
        step: '1',
        defaultValue: '1',
    }}
/>

우리는 idprops가 <MealItemForm /> 에 올바르게 전달되는지 확인해야 합니다. 해당 구성 요소가 사용 중일 때 말이죠 ( MealItem 구성 요소 안에서):

<MealItemForm id={props.id} />

 

마지막으로 중요한 것은 id 가 props의 형태로 MealItem에 전달되야 한다는 것이며, 따라서 AvailableMeals  구성 요소 내부에서, 우리는 이와같이 <MealItem /> 요소를 생성해야 합니다:

<MealItem
    id={meal.id} // this is new!
    key={meal.id}
    name={meal.name}
    description={meal.description}
    price={meal.price}
/>

다시 말하지만, 이것은 모두 100% 선택 사항입니다 이 데모 앱의 일반적인 기능과 관련하여 - 이러한 변경 없이 모든 것이 동영상에 표시된 대로 작동합니다. 그러나 적절한 접근성을 위해 이러한 조정을 고려해야 합니다.

또한 이러한 변경 사항을 반영하기 위해 모든 코드 스냅샷을 업데이트했습니다.

 

---

 

원문

With the current implementation of MealItemForm, every MealItem <Input /> receives the same id, as I do the following in the code I show in the previous lecture:

1. <Input label='Amount' input={{ id: 'amount', type: 'number', min: '1', max: '5', step: '1', defaultValue: '1', }}/>

This works but it has two major disadvantages which are not immediately obvious (and hence unfortunately slipped through during the recordings):

Clicking on ANY label will always select the same, first input element - even if that's not the one belonging to the actual MeatItem

Screenreaders won't be able to connect labels + inputs correctly (since all labels point at the same input)

Everything shown in the videos works as shown and fixing this is optional, but since fixing this is easy, you might want to consider making the below adjustments:

One possible workaround is to accept an id prop on the MealItemForm component and use that to create a unique id per <Input />:

1. <Input label='Amount' input={{ id: 'amount_' + props.id, // this changed! type: 'number', min: '1', max: '5', step: '1', defaultValue: '1', }}/>

We just have to make sure that the id props is passed correctly to <MealItemForm /> when that component is being used (i.e. inside of the MealItem component):

1. <MealItemForm id={props.id} />

Last but not least, for that to work, we should also pass id as a prop to MealItem, hence inside of the AvailableMeals component, we should create <MealItem /> elements like this:

1. <MealItem id={meal.id} // this is new! key={meal.id} name={meal.name} description={meal.description} price={meal.price}/>

Again, this is all 100% optional when it comes to the general functionality of this demo app - everything works as shown in the videos without these changes as well. But for proper accessibility, you should consider making these adjustments.

I did also update all the code snapshots to reflect these changes.