후크 추가

  • 2분

효과 후크를 사용하여 애플리케이션 상태를 감시하고 업데이트에 대한 응답으로 코드를 실행할 수 있습니다. useEffect를 사용하여 변경에 대한 응답으로 실행할 함수를 등록합니다.

시나리오

애플리케이션에서 사용자는 개별 항목을 탭하여 준비된 것으로 표시할 수 있습니다. 일부 항목이 아직 준비되지 않은 경우 계속 자르십시오라는 메시지가 표시됩니다. 모든 항목이 완료되면 준비 작업 완료!라고 표시됩니다.

새 상태 개체를 추가하여 이 동작을 설정합니다. 효과 후크의 개체를 업데이트합니다.

중요

예제에서는 useEffect 내의 상태를 수정합니다. 기본적으로 useEffect는 ‘모든’ 상태 저장 개체가 수정될 때마다 실행됩니다. 이 동작은 무한 루프를 만들 수 있습니다. 이 루프에서 상태를 수정하면 후크가 실행되고, 다시 상태가 수정되고, 후크가 실행되는 방식으로 반복됩니다.

무한 루프를 방지하기 위해에서 하나의 개체만 확인하도록 useEffect의 종속성 매개 변수를 사용할 수 있습니다. 이 작업은 코드를 만들 때 수행합니다.

새 상태 속성 추가

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

  2. 새 상태 속성을 추가하려면 TODO: Add new state property라는 줄 아래에 다음 코드를 삽입합니다.

    // TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);

효과 후크 수신기 추가

효과 후크 수신기를 추가하려면 TODO: Add the effect hook라는 줄 아래에 다음 코드를 삽입합니다.

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

이 코드에서는 setPrepared를 사용하여 prepared를 업데이트합니다. 지정한 조건과 일치하는 모든 항목을 기준으로 부울 값을 반환하는 every 메서드를 사용합니다. 예제에서는 모든 항목이 준비되었는지 여부를 확인합니다. 준비되지 않은 경우 메서드에서 false가 반환됩니다.

useEffect의 두 번째 매개 변수는 [recipe]로 설정되었습니다. 이 설정은 recipe 개체가 변경된 ‘경우에만’ 코드가 실행되도록 하는 종속성을 제공합니다.

표시 추가

이제 준비 작업이 완료되면 사용자에게 메시지를 표시합니다. 이렇게 하려면 TODO: Add the prep work display라는 줄 아래에 다음 코드를 추가합니다.

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

prepared 개체를 확인합니다. 참이라면 준비 작업 완료!가 표시됩니다. 그렇지 않으면 계속 자르십시오가 표시됩니다.

페이지 테스트

  1. 모든 파일을 저장합니다.
  2. 브라우저로 돌아가서 페이지를 새로 고칩니다.
  3. 재료를 선택하여 모두 준비된 것으로 표시합니다. 목록의 모든 항목에 취소선이 표시되어야 합니다. 페이지 맨 아래에 있는 텍스트가 업데이트됩니다.