리액트 React Side effects와 useEffect hook

React Side Effect

UI rendering 에 연관되지 않은 모든 부수적인 효과를 말한다.

예를 들면,

• 서버에 HTTP요청을 보내는 것
• browser storage에 데이터를 저장하는 것
• 자바스크립트 함수에 timer를 설정하는 것

위의 예시들은 리액트 프로젝트를 만들때 매우 자주 사용되지만, 리액트의 최종 목적인 UI 렌더링에는 영향을 주지 않고 비동기적으로 처리된다. 이를 Side Effects 라고 한다.

React hooks 사용 이전의 클래스형 리액트 코드에서는 Life Cycle 의 componentDidMount()를 이용해 비동기적으로 데이터를 수행했다. 그러나 클래스 기반 리액트 코드는 함수 기반에 비해 복잡하고 오류가 발생하기 쉽다는 단점이 있었다.

이후 React hooks를 사용하게 되면서 함수 컴포넌트에서도 React hooks 에서 제공하는 useEffect()함수를 사용하게 되었다.

 

useEffect

 

useEffect hook이란 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 렌더링 될 때, 혹은 useEffect 함수의 파라미터에 전달한 변수의 값이 달라지게 되면 DOM update를 수행한 후에 훅을 불러낸다.

 

 

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

Using the Effect Hook – React