useEffect 란?

React Hook 중 하나로, 컴포넌트가 렌더링된 이후에 어떤 작업을 수행해야 하는 지를 지정할 수 있는 Hook입니다. 이를 통해 함수형 컴포넌트에서도 side effect를 수행할 수 있게 됩니다.

기존 Class형 컴포넌트에서 렌더링 LifeCycle

• componentDidMount : 컴포넌트가 마운트 될 때(컴포넌트가 마운트된 직후 호출됩니다.)
• componentDidUpdate : 컴포넌트가 업데이트 될 때(컴포넌트가 업데이트된 직후 호출됩니다.)
• componentWillUnMount : 컴포넌트가 언마운트 될 때(컴포넌트가 언마운트되기 직전 호출됩니다.)

useEffect는 위 LifeCycle들은 하나의 hook으로 관리할 수 있습니다.

이를 통해 함수형 컴포넌트에서도 쉽게 Side Effect를 다룰 수 있습니다.

Side Effect(부수효과)

함수가 실행되면서 함수 외부의 값이나 상태를 변경시키는 것을 의미합니다.

리액트의 함수형 컴포넌트는 props와 state를 기준으로 컴포넌트가 렌더링됩니다.

컴포넌트의 렌더링과 무관한 연산들이 존재한다면 이것이 Side Effect가 됩니다.

무관한 연산을 컴포넌트 내에서 직접 수행하는 것은 옳지 않은 개발 방식입니다.

=> 개발자가 컴포넌트의 렌더링을 통제할 수 없기 때문입니다.

대표적인 Side Effect