애플리케이션에 상태 추가

  • 2분

React는 몇 가지 방법으로 상태를 관리합니다. 여기서는 주요 방법 중 하나인 ‘React 후크’를 중점적으로 살펴보겠습니다.

‘후크’는 React의 내부 작업에 액세스할 수 있게 해주는 메커니즘입니다. React에서 무엇이든 변경되면 후크를 사용하여 코드를 실행할 수 있습니다. 또는 후크를 사용하여 상태 등을 React에 등록합니다. 예를 들어 useState 후크를 사용하여 상태를 만들면 후크 값을 업데이트하는 업데이트 프로그램 기능과 상태 개체를 얻게 됩니다.

시나리오

많은 요리사가 사용하는 대표적인 기술은 프랑스어로 “영업장 준비”를 의미하는 미쟝 플라스입니다. 요리사는 요리를 시작하기 전에 모든 항목이 준비되었는지 확인합니다.

예제 레시피 애플리케이션에서는 사용자가 재료를 탭하여 준비된 것으로 표시할 수 있게 하려고 합니다. 먼저 상태를 만들고 표시 정보를 구성 요소에 전달할 것입니다. 다음 단원에서는 이벤트 처리 방법을 살펴보겠습니다.

상태 추가

모든 JavaScript 개체 또는 데이터 형식을 React에서 상태 저장으로 등록할 수 있습니다. 개체를 등록하는 데 사용되는 함수는 useState입니다. useState 함수는 초기 값을 지정합니다. 새로 만든 상태 저장 개체 및 값을 업데이트하는 데 사용할 수 있는 다른 함수를 반환합니다.

참고

React에서 상태는 ‘변경 불가능’이므로 변경할 수 없습니다. 상태 저장 개체의 값을 수정하려면 적절한 값이 포함된 새 인스턴스로 바꿉니다. useState에서 반환된 함수가 이 프로세스를 관리합니다.

  1. VS Code Explorer에서 src 폴더를 확장하고 App.jsx 파일을 엽니다. 기존 initialRecipe 개체를 확인합니다. 이 개체를 상태 저장 recipe의 기본값으로 사용합니다.

  2. useState에서 recipe 상태 개체와 setRecipe 함수를 만듭니다. 이렇게 하려면 TODO: Create recipe state라는 줄 뒤에 다음 코드를 추가합니다.

    const [ recipe, setRecipe ] = useState(initialRecipe);

    이 코드에서 recipe는 상태 저장 개체입니다. setRecipe 함수는 recipe를 새 버전으로 바꾸는 데 사용됩니다.

  3. recipe를 사용하여 속성을 구성 요소에 전달할 수 있습니다. 다음 코드에서 RecipeTitle 구성 요소는 제목과 피드백을 표시하는 데 사용됩니다. TODO: Pass recipe metadata to RecipeTitle이라는 주석 뒤에 다음 코드를 추가하여 title 및 feedback 값을 RecipeTitle에 전달합니다.

    <RecipeTitle title={recipe.title} feedback={recipe.feedback} />

  4. RecipeTitle.jsx 파일을 엽니다. title 및 feedback 속성을 표시하는 기존 구성 요소를 확인합니다.

페이지 테스트

  1. 모든 파일을 저장합니다.

  2. 브라우저로 돌아가서 새로 고칩니다. 이제 페이지에 레시피 메타데이터가 표시됩니다.

    Screenshot of the recipe metadata in the browser window.