React) useEffect 사용방법, dependency array

useEffect

useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것

useEffect는 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다.

React는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다.

 

side effects

=> 데이터 가져오기 , 구독 설정하기, 수동으로 react 컴포넌트의 DOM을 수정하는 것 등등

 

class

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

UseEffect 사용

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

 

생명주기가 필요한 useEffect (정리가 필요한 경우)

class형

  componentDidMount() { // 컴포넌트 연결시
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  componentWillUnmount() { // 컴포넌트 없어질 때
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

useEffect

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() { //화살표 함수를 반환하거나 다른 이름이어도 괜찮음
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

Reacr는 컴포넌트가 마운트 해제되는 때에 정리를 실행하지만 effect는 렌더링이 실행될 때마다 실행한다. 따라서 다음 차례의 effect를 실행시키기 전에 이전 렌더링에서 파생된 effect를 정리해주는 것.

 

원할 때만 useEffect 실행 (useEffect의 두 번째 인수인 dependency array)

특정 값들이 리렌더링 시에 변경되지 않는다면 React로 하여금 effect를 건너뛰도록 할 수 있다. 

바로 useEffect의 선택적 인수인 두 분째 인수로 배열을 넘기면 된다.

seEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

두 번째 인자는 무조건 배열 형태여야 한다. 2개 이상의 요소를 관찰하다 둘 중 하나가 바뀔 때 반영하고 싶을 때는

seEffect(() => {
  document.title = `${name} clicked ${count} times`;
}, [name, count]); // name과 count중 하나라도 바뀌면 실행한다.

이렇게 하면 된다.

 

Effect의 실행과 정리 과정을 딱 한 번만 실행하고 싶다면 빈 배열을 넘기면 된다.