React Tricks Miniseries 6: useEffect를 올바르게 사용하는 방법

react의 useEffect 후크는 아마도 올바르게 작성하고 제대로 이해하기 위한 가장 복잡한 후크일 것입니다.

useEffect가 어떻게 작동하는지에 대한 의미론에 너무 많이 들어가지 않고 올바르게 사용하는 방법을 보여주기에 충분한 간단한 설명을 제공하겠습니다.

useEffect는 내부 코드를 비동기적으로 실행하는 반응 함수입니다. 그러나 기본적으로 비동기식은 아닙니다. 기본적으로 구성 요소가 마운트될 때 코드를 실행하고 한 번만 실행합니다. 마지막에 표시되는 종속성 배열은 "어떤 변수를 안에 넣든지 변수가 값을 변경할 때마다 내 내부의 전체 코드를 다시 실행합니다"라고 말합니다. 종속성 배열에 변수를 넣은 경우에만 비동기화됩니다.

useEffect(() => {
  //get posts info from database
  //get posts info again everytime a new comment is added/edited
},[comments]) 

종속성 배열 안에 변수 comment(게시물 댓글 배열을 포함할 수 있음)를 넣으면 댓글이 추가되거나 편집될 때마다 게시물 데이터를 다시 가져오고 싶다고 react에게 알립니다.

이제 많은 개발자가 생략하거나 인식하지 못하는 두 가지 개념이 있습니다.

대청소

정리 기능은 useEffect에서 구독을 취소하기 위한 것입니다. 구성 요소가 가상 돔에서 마운트 해제될 때 게시물 데이터 가져오기를 중지해야 한다는 의미입니다. 아무 조치도 취하지 않으면 react는 오류가 발생하고 콘솔에서 useEffect 구독 취소에 대해 경고합니다. 이를 해결하기 위해 간단한 정리 기능을 사용할 수 있습니다.

여기에서 멋진 트릭을 사용할 수 있습니다. 구독을 중지하기 위해 무엇을 반환해야 하는지 파악하는 대신 useEffect에서 원래 코드를 반환하면 구성 요소가 마운트 해제될 때마다 자동으로 소멸됩니다.

useEffect(() => 
  //get posts info from database
,[comments]) 

중괄호를 제거하고 원래 코드를 효과적으로 반환함으로써 react가 useEffect 내부의 모든 리스너를 구독 취소하는 방법에 유의하십시오. 반품이 필요 없습니다. 우리의 코드는 더 깔끔하고 짧게 유지됩니다.

결론

useEffect 내부에 원래 코드를 반환함으로써 useEffect 내부의 리스너를 더 깔끔하게 정리하고 구독 취소할 수 있습니다.

이 트릭을 알고 있었나요, 아니면 지금 막 배웠나요? 댓글로 알려주세요!