React에서 Hook은 함수 컴포넌트 안에서 React의 상태와 생명주기 기능을 "연결(hook into)" 할 수 있도록 도와주는 함수입니다.
React Hook 을 통해서 React는 상태관리와 생명주기 메서드를 함수 컴포넌트에서 사용할 수 있도록 연결하며, 렌더링이나 상태가 변경되는 시점에 실행되도록 예약된 로직을 정의합니다.
React Hook에 대한 이해를 위해 간단하게 기록합니다.
목차
useEffect
React는 상태나 props가 변화하면 DOM 을 업데이트 하는 작업을 담당하며, 그 외에 실행되는 작업이 있다면 모두 Side Effect라고 가정합니다. 예를 들면 데이터를 가져오는 작업이나, React 가 아닌 방식으로 DOM에 접근해서 개발하는 것들이 있을 수 있습니다.
useEffect는 컴포넌트의 Side Effect를 처리하기 위한 React Hook입니다.
예전에는 클래스 컴포넌트의 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)에서 Side Effect를 처리했습니다.
하지만 함수 컴포넌트에서는 useEffect를 사용해 동일한 작업을 수행합니다.
기억해야할 점은 useEffect는 렌더링 이후에 실행된다는 것 입니다. 그리고기본적으로 매 렌더링 후에 호출됩니다.
