React의 useEffect Hook 사용

사용 useEffect은 아마도 React Hooks의 가장 좋은 부분 일 것입니다. 구성 요소 수명주기 메서드의 혼란을 줄이는 데 도움이되며, 가장 중요한 것은 수명주기 메서드에 나타날 수있는 다른 논리를 분리하는 데 도움이됩니다. 오늘 useEffect은 React 웹 사이트의 예제를 통해 주요 이점 각각에 대해 하나의 예제를 살펴 보겠습니다 .

먼저 후크가 일반적인 혼란을 줄이는 데 어떻게 도움이 될 수 있는지 살펴 보겠습니다. 이 첫 번째 경우는 일반적인 클래스 기반 수명주기 방법이 마운트 해제없이 기본 사례에 포함되는 방식입니다.

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

위의 예에서 이미 알 수 있듯이 useEffectAPI 호출을 사용하고 마운트 해제 할 때 얼마나 좋은지 알 수 있습니다 . 다음은 ChatAPI를 사용하여 친구의 온라인 상태를 구독하는 경우 수명주기 방법이 어떻게 보일지에 대한 간단한 예입니다.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

useEffect다시 렌더링 할 때마다 실행 된다는 것을 잊지 마십시오 ! 업데이트가 그래픽 적으로 비싸거나 지속적으로 필요하지 않은 API 호출 인 경우 과도 할 수 있습니다. 가장 좋은 부분 중 하나는 useEffect무언가를 최적화하는 것이 얼마나 쉬운 지입니다.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

useEffect(() => {}, []);

또한 빈 배열을 useEffect두 번째 인수로 추가하면 한 번만 실행 되고 필요한 경우 마운트 해제됩니다. 이 경우에만 사용 된 경우와 유사하다 componentDidMount및 componentWillUnmount사용하지 않고 componentDidUpdate이것은 당신은 단지 시작에 한 번 실행하려면 알아야 할 중요한 트릭이다.

자,이 예제는 매우 간단했고, 클래스 사용에서 후크로의 전환을 더 쉽게 안내 할 수 있었기를 바랍니다. useEffect후크를 사용하는 데있어 훌륭한 도구이며 코드베이스에 누적 될 수있는 부피가 큰 거대한 수명주기 함수를 관리하는 부담을 줄이는 데 도움이됩니다.

각각 useEffect은 자체 마운트, 업데이트 및 마운트 해제를 처리 할 수있는 자체 기능입니다. 이것은 "외부"개발자가 더 쉽게 유지 관리하고 필요한 경우 코드의 다른 부분을 실수로 엉망으로 만들지 않고 코드베이스의 해당 부분을 변경하는 데 도움이된다고 생각합니다. 또한 최적화를 위해 쉽게 변경하거나 추가 할 수도 있습니다.

useEffect수정 중인 기능이 특정 구독 또는 업데이트에 필요한 것만 처리 한다는 것을 안전하게 알 수 있습니다 . 물론 원래 개발자가 해당 기능에 관련없는 논리를 추가하지 않았다고 가정합니다! 당신이 그런 일은 절대하지 않을 거라는 거 알아요?

useEffectReact 에서 후크를 사용하는 것에 대한 내 작은 schpiel을 읽어 주셔서 감사합니다 . 당신이 그것을 즐겼다면 (그리고 무언가를 배웠다면), 나는 useState아직 그것에 대해 이야기하지 않았기 때문에 가까운 장래에 React의 최적화 주제를 다룰 생각이었습니다 . 어쨌든 시간 내 주셔서 감사합니다.