[React] 공식 문서 / Hook / 4. Effect Hook 사용하기

https://ko.reactjs.org/docs/hooks-effect.html

 

 

 

 

side effect ( = effect)

기능

• 데이터 가져오기
• 구독 설정하기
• 수동으로 리액트 컴포넌트의 DOM 수정하기

 

종류

• 정리(clean-up)가 필요한 것
• 그렇지 않은 것

 

 

정리(Clean-up)를 이용하지 않는 Effects

리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우

• 네트워크 리퀘스트
• DOM 수동 조작
• 로깅

-> 실행 이후 신경 쓸 것이 없기 때문에!

 

 

 

 

useEffect

useEffect가 하는 일?

-> useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말함

• 리액트는 우리가 넘긴 함수(effect)를 기억했다가 DOM 업데이트를 수행한 이후에 불러낼 것
• 문서 타이틀 지정, 데이터 가져오기, 명령형 API 불러내기 등

 

useEffect를 컴포넌트 안에서 불러내는 이유?

-> effect를 통해 count state 변수(또는 그 어떤 props에도)에 접근할 수 있게 됨

• 함수 내부에 존재하기 때문에 특별한 API없이도 값을 얻을 수 있음

 

useEffect는 렌더링 이후에 매번 수행되나?

-> YES! 기본적으로 첫번째 렌더링과 이후 모든 업데이트에서 수행됨

• Mounting과 Update라는 방식으로 생각하기보단, effect를 렌더링 이후에 생하는 것으로 생각하는 것이 더 쉽다
• 리액트는 effect가 수행되는 시점에 이미 DOM 업데이트가 되었음을 보장

 

 

TIP

• componentDidMount 또는 componentDidUpdate와는 달리
  useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않는다.
• 이로 인해 애플리케이션의 반응성 향상
• 대부분의 effect는 동기적으로 실행될 필요X
• 동기적 실행히 필요한 경우, useLayoutEffect 훅 사용 (useEffect와 동일한 API사용)

 

 

 

 

 

 

정리(Clean-up)를 이용하는 Effects

외부 데이터에 구독을 설정해야 하는 경우

메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요!

 

 

Class 컴포넌트 사용 예시

  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
    });
  }

• componentDidMount 와 componentWillUnMount 메소드 내의 개념상 같은 effect에 대한 코드가 있음에도,
  생명주기 메서드는 이를 분리함

 

 

Hook 사용 예시

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

effect에서 함수 반환하는 이유?

-> clean-up 하려고

• 모든 effect는 clean-up을 위한 함수 반환 가능
• 구독의 추가와 제거가 묶여서 모두 하나의 effect를 구성

 

리액트가 effect를 clean-up하는 시점은 정확히 언제?

-> 컴포넌트가 마운트 해제될 때

• 하지만, 위 예시에서 보았듯이, effect는 한번이 아니라 렌더링 될 때마다 실행됨
  (때문에,다음 effect를 실행하기 전에 이전 렌더링에서 파생된 effect를 clean-up 해야함)

 

TIP

• effect에서 반드시 유명함수(named function)을 반환해야 하는 것은 아님
• 화살표 함수를 반환하거나 다른 이름으로 불러도 무방. (목적을 분명히 하기 위해 clean-up이라고 부름)

 

 

요약

• effect Hook은 두 가지 경우를 한 개의 API로 통합한다.
• Hook을 이용하면 생명주기 메서드에 따라서가 아니라 코드가 무엇을 하는지에 따라 나눌 수 있음

 

 

 

 

 

* 참고자료 *

React 클래스 컴포넌트의 생명주기

[velog.io/@piecemaker/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0]

React 컴포넌트의 생명주기