후크 추가
효과 후크를 사용하여 애플리케이션 상태를 감시하고 업데이트에 대한 응답으로 코드를 실행할 수 있습니다. useEffect
를 사용하여 변경에 대한 응답으로 실행할 함수를 등록합니다.
시나리오
애플리케이션에서 사용자는 개별 항목을 탭하여 준비된 것으로 표시할 수 있습니다. 일부 항목이 아직 준비되지 않은 경우 계속 자르십시오라는 메시지가 표시됩니다. 모든 항목이 완료되면 준비 작업 완료!라고 표시됩니다.
새 상태 개체를 추가하여 이 동작을 설정합니다. 효과 후크의 개체를 업데이트합니다.
중요
예제에서는 useEffect
내의 상태를 수정합니다. 기본적으로 useEffect
는 ‘모든’ 상태 저장 개체가 수정될 때마다 실행됩니다. 이 동작은 무한 루프를 만들 수 있습니다. 이 루프에서 상태를 수정하면 후크가 실행되고, 다시 상태가 수정되고, 후크가 실행되는 방식으로 반복됩니다.
무한 루프를 방지하기 위해에서 하나의 개체만 확인하도록 useEffect
의 종속성 매개 변수를 사용할 수 있습니다. 이 작업은 코드를 만들 때 수행합니다.
새 상태 속성 추가
App.jsx 파일을 엽니다.
새 상태 속성을 추가하려면
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
개체를 확인합니다. 참이라면 준비 작업 완료!가 표시됩니다. 그렇지 않으면 계속 자르십시오가 표시됩니다.
페이지 테스트
- 모든 파일을 저장합니다.
- 브라우저로 돌아가서 페이지를 새로 고칩니다.
- 재료를 선택하여 모두 준비된 것으로 표시합니다. 목록의 모든 항목에 취소선이 표시되어야 합니다. 페이지 맨 아래에 있는 텍스트가 업데이트됩니다.