이전

다음

이벤트 처리기 추가 및 상태 업데이트

완료됨

애플리케이션의 핵심 구성 요소(App)에 상태를 저장하면 중요한 모든 속성의 현재 값을 읽을 수 있습니다. 각 구성 요소를 조작하지 않아도 됩니다. 이벤트를 중앙에서 처리하여 데이터가 한 위치에서만 수정되도록 할 수도 있습니다.

시나리오

애플리케이션 사용자가 항목을 완료하면 재료 목록에서 해당 항목을 탭할 수 있게 하려고 합니다. 상태에서 항목을 prepared로 표시합니다. 이 설정은 애플리케이션 전체에 반영됩니다. 값이 변경되면 구성 요소는 업데이트를 감지하고 필요에 따라 다시 평가합니다.

클릭 이벤트에 대한 메서드 추가

1. App.jsx 파일을 엽니다.

2. ingredientClick이라는 이벤트 수신기를 만듭니다. TODO: Create ingredientClick event listener라는 주석 아래에 추가합니다.

   function ingredientClick(index) {
       const updatedRecipe = { ... recipe };
       updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
       setRecipe(updatedRecipe);
   }
   

   spread 연산자를 사용하여 recipe 복사본을 만드는 것으로 논리가 시작됩니다. index를 사용하여 업데이트된 ingredient를 검색합니다. prepared의 값을 반대로 바꿉니다. 마지막으로, setRecipe를 사용하여 상태의 recipe 개체를 바꿉니다.

3. 레시피 재료를 표시하는 구성 요소인 IngredientList를 추가합니다. 이렇게 하려면 TODO: Pass ingredients and event listener to IngredientList라는 주석 뒤에 다음 코드를 추가합니다.

   <IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />
   

   다른 모든 속성과 마찬가지로 ingredientClick 함수를 구성 요소에 전달할 수 있습니다.

이벤트 수신기를 사용하도록 IngredientList 업데이트

React에서 속성(또는 props)은 함수를 비롯한 모든 JavaScript 형식일 수 있습니다. 따라서 이벤트 처리기를 속성으로 설정할 수 있습니다. 이 설정을 통해 중앙 집중식 이벤트 처리가 가능합니다.

앞에서 만든 ingredientClick 함수를 사용하도록 IngredientList를 업데이트하겠습니다.

1. IngredientList.jsx 파일을 엽니다. 기존 구성 요소를 확인합니다. 이 구성 요소를 사용하여 이벤트 사용 방법을 확인할 것입니다.

2. TODO: Add onClick event 주석 아래에 다음 JSX를 추가합니다.

   onClick={ () => props.onClick(index) }
   

   속성 onClick 함수에 매개 변수를 전달할 수 있습니다.

   참고

   구성 요소 props에서 사용한 onClick 이름에 특별한 이유는 없습니다. 임의로 선택한 이름으로, 이전에 App.jsx 파일에서 전달되었습니다.

페이지 테스트

1. 모든 파일을 저장합니다.
2. 브라우저로 돌아가서 페이지를 새로 고칩니다. 재료를 선택하면 취소선 상태가 변경됩니다. 상태가 변경되는 것은 prepared 속성이 업데이트되기 때문입니다.

계속