[React Native] useEffect 사용, 유의점 이해하기

2020-05-26

useEffect 이해

class based component는 생명주기 함수가 있었다. componentDidMount, componentWillMount 등 컴포넌트가 시작될 때, 종료될 때 호출되는 함수가 있었음. functional component에서는 이것을 useEffect로 대체할 수 있다.

뿐만 아니라 특정 state 값 변경을 감지할 수 있다.

참고로 useEffect는 하나의 컴포넌트에 두 번 세 번 사용할 수 있다. 당연한 이야기일 수 있지만 처음 useEffect를 배웠을 때 한 번만 사용해야 하는줄 알았음

useEffect 언제 사용하는가

1) 컴포넌트가 rerender 될 때마다 호출하고 싶은 경우

useEffect는 두 가지 argument를 넘겨받는데, 첫번째가 호출할 함수, 두번째가 listen 할 state 값이다. 만약 두 번째 argument에 아무 값도 넘기지 않으면 컴포넌트가 rerender 될 때마다 사용한다. 컴포넌트가 rerender 되는 경우가 state값이 변경될 때이므로, 화면이 자주 갱신되는 경우 매우 유의해서 사용해야 한다.

const CenterScreen = () => {
  
    useEffect(() => {
        fetchCenters();
    })

    return (
        ...
    )
}

2) 컴포넌트가 처음 mount 됬을 때

useEffect는 두 가지 argument를 넘겨받는데, 첫번째가 호출할 함수, 두번째가 listen 할 state 값이다. 만약 두번째 텅 빈 배열을 넘겨주면 아무 값도 변경되지 않는다고 인식하기 때문에 처음 호출될 때 이후에는 호출되지 않는다.

주로 각 컴포넌트의 초기값을 설정하는데 사용한다. 서버로부터 데이터를 받아오거나, 로컬 db에서 데이터를 읽어오거나, async storage로부터 설정된 값을 확인할 때 사용할 수 있다.

const CenterScreen = () => {
  
    useEffect(() => {
        fetchCenters();
    }, [])

    return (
        ...
    )
}

3) 컴포넌트가 unmount 됬을 때

useEffect에 넘긴 함수가 return하는 값은 컴포넌트가 종료될 때 호출된다. 더 정확히는 두 번째 인자로 넘겨준 state 값이 변경되 useEffect가 다시 호출될 때, 다시 호출되기 전 첫번째 argument의 함수 return 값이 호출되는 것이다. 이를 이용해 두 번째 argument에 텅 빈 배열을 넘겨주면 컴포넌트가 unmount 될 때 호출되기 때문에 컴포넌트가 종료될 때처럼 생명주기로 이용할 수 있다.

주로 메모리 누수를 해결하기 위해 listener를 제거하는데 사용한다. 예를 들어 notification의 경우 useEffect가 호출되면서 처음 register 되지만, 계속 register 된 상태로 둘 경우 메모리 누수가 발생할 수 있기 때문에 해당 컴포넌트를 종료할 때 같이 unRegister 해준다

const CenterScreen = () => {
  
    useEffect(() => {
        return {
          // 여기
        }
    }, [])

    return (
        ...
    )
}

4) 특정 값의 변화를 감지하고 싶을 때

두 번째 argument에 특정 값이 들어간 배열을 넘겨줄 경우 해당 값이 변경될 때마다 호출된다. 예를 들어 center 값을 새롭게 불러왔을 때 후속 작업으로 꼭 필요한 일이 있을 때 두 번째 argument로 [center]를 넘겨주면, center 값이 변경될 때마다 호출된다.

참고로 다시 해당 함수가 호출되기 전 return으로 넘긴 함수가 호출됨

const CenterScreen = () => {
  
    const [centers, setCenters] = useState(null);
  
    useEffect(() => {
      	// do something
        return {
          // 여기
        }
    }, [centers])

    return (
        ...
    )
}