후크

  • 1분

후크는 값이 변경되거나 기타 이벤트가 발생하는 프레임워크의 일반적인 패턴입니다. 중앙 집중식으로, 상태 변경 시 또는 애플리케이션 수명 주기의 다른 단계에서 실행할 사용자 고유의 코드를 삽입합니다.

효과 후크

이 단원에서는 ‘효과’ 후크를 중점적으로 살펴보겠습니다. 이 후크는 상태 값이 설정될 때마다 발생합니다. 초기 값과 모든 후속 업데이트가 설정될 때 발생합니다.

효과 후크를 사용하면 값 설정에 대한 응답으로 코드를 실행할 수 있습니다. 실행하는 코드에 부작용이 있을 수 있으므로 필요에 따라 값을 업데이트할 수 있습니다.

효과 후크를 사용해야 하는 경우

상태 변경에 응답하기 위해 코드를 중앙에서 처리해야 할 때마다 효과 후크를 사용할 수 있습니다. 많은 값을 포함하는 복잡한 양식이 있다고 가정해 보겠습니다. 일반적으로 서버로 전송해야 하는 데이터가 유효한 상태가 될 때까지 제출 단추를 사용할 수 없도록 해야 합니다. 데이터에서 변경된 개별 값에 대한 이벤트가 있다고 가정해 보겠습니다. 사용자가 애플리케이션에서 국가/지역을 선택하면 서버에서 시/도 목록을 검색해야 합니다.

각 이벤트 수신기에서 상태를 검사하여 데이터가 서버로 전송될 준비가 되었는지 확인하고 싶지는 않습니다. 이 설정은 비효율적입니다. 대신, 효과 후크를 사용할 수 있습니다. 효과 후크는 데이터를 확인하는 함수 하나를 만들 수 있습니다. 이 함수는 데이터가 유효한 상태일 경우 제출 단추를 사용할 수 있도록 설정할 수 있습니다.

useEffect

효과 후크의 수신기를 등록하려면 useEffect를 사용합니다. useEffect는 상태 변경 시 실행할 매개 변수가 없는 함수를 허용합니다.

useEffect(() => {
    // code goes here
});

기본적으로 useEffect는 상태 저장 개체의 상태가 변경될 때마다 실행됩니다. 특정 개체 그룹에만 후크를 사용하도록 설정하는 종속성을 제공할 수 있습니다.

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);