useEffect 란?

react의 컴포넌트 내에서 데이터를 가져오거나 구독하고, DOM을 조작하는 작업을 side effects 또는 effects라고 한다. 이는 다른 컴포넌트에 영향을 줄 수 도 있고 렌더링 과정에서는 구현 불가능한 작업이기 때문이다.

useEffect는 이러한 side effects를 수행할 수 있도록 해준다. 클래스 컴포넌트의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같이 lifecycle을 다루는 목적으로 제공되지만 이를 하나의 API로 통합하였다는 것이 차이점이다.

 클래스형 컴포넌트의 life cycle

 react의 원래 lifecycle은 위의 그림과 같다. react 컴포넌트 side effect에는 일반적으로 정리가 필요한 것과 그렇지 않은 것이 있다.

 정리가 필요하지 않은 effects

 정리가 필요하지 않은 effects는 react가 DOM을 업데이트한 후 추가로 코드를 실행해야하는 경우이다.

componentDidMount() { // same code } componentDidUpdate() { // same code }

• 클래스 컴포넌트 클래스 컴포넌트에서는 이러한 side effect를 componentDidMount나 componentDidUpdate 함수로 다룬다. 컴포넌트가 막 마운트되는 단계인지 업데이트되는 단계인지에 따라 둘 중 어떤 함수를 쓸 지가 달라지므로 항상 실행되게 하려면 클래스형 컴포넌트에서는 중복된 코드를 작성해야한다.

useEffect(() => { // same code });

• 함수형 컴포넌트 함수형 컴포넌트에서는 useEffect hook을 사용하여 한번에 나타낼 수 있다. 이 hook은 마운팅과 업데이트의 개념이 없이 렌더링 이후에 매번 수행된다.

 정리가 필요한 effects

 정리가 필요한 effects는 외부 데이터에 구독을 설정해야하는 경우를 들 수 있다. 이런 경우 메모리 누수가 발생하지 않도록 데이터를 정리하는 것이 매우 중요하다.

• 클래스 컴포넌트 클래스 컴포넌트에서는 componentDidMount 함수에서 구독을 설정한 후, componentWillUnmount함수에서 이를 정리한다.
• 함수형 컴포넌트 함수형 컴포넌트에서는 useEffect hook에서 이를 함께 다루어야한다. useEffect에서 정리를 위한 함수는 return으로 반환해줄 수 있다. 따라서 구독의 로직은 useEffect hook 내에 정의하고, 정리를 위한 로직은 return으로 반환해주면 된다. 따라서 구독이라는 하나의 로직과 관련된 요소가 클래스와는 달리 함수형 컴포넌트에서는 한 곳에 묶여있게 된다.

 이렇게 Hook을 사용하면 클래스형 컴포넌트와는 다르게 생명주기 메서드가 아니라 특정 기준에 따라 로직들을 나눌 수가 있다.

useEffect에서 구독과 정리를 동시에 다룸으로써 하나의 로직을 묶어서 다룰 수는 있게 되었다. 그렇다면 관련이 없는 로직들은 어떻게 구분할까?

useEffect hook도 useState와 같이 여러번 사용할 수 있다. 따라서 다른 hook에 정의함으로써 서로 관련이 없는 로직들은 갈라놓을 수 있다. react는 이 hook들을 지정된 순서에 따라 적용한다.