💼 Effect Hook

Effect Hook을 알아보기 전에 Effect Hook이 왜 생겼는지 알아보자.

🗂️ Side Effect

Effect Hook의 발생 이유는 Side Effect 때문에 생겼다.

📑 Pure Function (순수 함수)

순수 함수는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수가 아니다.
순수 함수는 Side Effect가 없다. 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴된다.

function add(a, b) {
	return a + b;
}

add(1, 2);

add(1, 2)는 항상 같은 값을 리턴한다.

📑 Side Effect (부수 효과)

Side Effect는 일반적으로 컴포넌트 외부와의 상호작용이나 전역 상태의 변경과 관련된 작업을 말한다. React 컴포넌트는 상태(state)와 props에 의존하여 렌더링된다. 하지만 간단한 업데이트만으로 부족할 때가 있다. 다른 작업으로 상태를 업데이트 해야 할 때가 있다. 이런 작업은 에러를 발생할 확률이 높기 때문에 따로 관리해야 한다.

📑 React의 함수 컴포넌트

React의 함수 컴포넌트는 props가 입력으로, JSX Element가 출력값으로 나오는 순수 함수처럼 작동한다.

하지만 React 애플리케이션에서는 Ajax나 LocalStorage나 setTimeout 같은 부수 효과를 끼치는 작업들을 사용할 수 해야할 때가 있다. React와 상관없는 이런 작업들은 React 입장에서는 Side Effect다.

• 외부에서 데이터 가져오기: API 호출.
• DOM 조작: 특정 DOM요소를 선택하고 조작하는 방법.
• 타이머 설정: setTimeout, setInterval 등의 함수.

React는 이러한 Side Effect를 다루기 위한 Hook을 제공한다. 바로 useEffect

🗂️ Effect Hook

• 컴포넌트 생성 후 처음 화면에 렌더링
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

컴포넌트가 새롭게 렌더링될 때마다 Effect Hook이 실행된다. 이건 아무것도 설정 안했을 때, 이러한 조건으로 실행된다.

📑 조건부 effect 발생 (dependency array)

useEffect(함수, [종속성1, 종속성2, ...])
두 번째 인자는 종속성 배열이다. 종속성의 값이 변할 때, 첫 번째 인자인 함수가 실행된다.

useEffect(함수, [])처럼 두 번째 인자로 빈 배열을 넣게 되면 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다.