reactjs

따라야하는 패턴은 useCase에 따라 다릅니다.

첫째 , 초기 마운트 중에 이벤트 리스너를 추가하고 마운트 해제시 정리해야하는 상황과 특정 리스너를 정리하고 소품 변경시 다시 추가해야하는 또 다른 경우가있을 수 있습니다. 이 경우 두 가지 다른 useEffect를 사용하면 관련 논리를 함께 유지하고 성능 이점을 얻는 것이 좋습니다.

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

둘째 : 상태 또는 소품이 세트간에 변경 될 때 API 호출 또는 기타 부작용을 트리거해야하는 경우가있을 수 있습니다. 이 경우 useEffect모니터링 할 관련 값이 있는 싱글을 사용하는 것이 좋습니다.

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

셋째 : 다른 값의 변경에 대해 다른 조치를 취해야하는 세 번째 경우입니다. 이 경우 관련 비교를 서로 다른useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])