React의 side effect와 effect hook

• 인자나 외부의 변수를 변경하지 않는 함수를 pure function이라고 한다.
• 이 pure function, 순수 함수는 만약 같은 인자를 전달 받는다면, 항상 똑같은 결과 값을 return한다.
• 따라서 pure function은 예측 가능한 함수이다.
• 하지만, 어떤 함수는 실행시 함수 외부의 환경에 영향을 줄 수 있다.

// 예시 //
let counter = 0;
function count(){
	counter += Math.floor(Math.random() * 100);
}
count();
console.log(counter); 

• 위와 같은 함수는 외부의 counter 함수를 변경하며, 그 값을 예측 불가능하게 한다.
• 위와 같이 함수가 외부에 영향을 미치면 이를 side effect 라고 한다.

보통 React에서 side effect는 Ajax 요청이나 LocalStorage API를 사용하는 등 외부에서 데이터를 가져올 때와, react와 관계없는 API (setTimeout과 같은 타이머, LocalStorage 등) 을 사용할 때 이들이 react 컴포넌트에게는 side effect이다.

useEffect

• React는 side effect를 다루기 위해서 effect Hook을 제공하고 이것이 useEffect이다.
• 클래스형 컴포넌트에서는 side effect를 처리하기 위해서 life cycle 매서드인 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 매서드를 사용했었다.
  (함수형 컴포넌트에서는 useEffect를 통해서 같은 기능을 구현할 수 있다.)

• useEffect는 첫 번째 인자로 함수를 받고, 두 번째 인자로 배열을 받는다.

• useEffect는 컴포넌트가 생성되었을 때, 새로운 props를 받았을 때, state가 변경되었을 때 실행되며, 첫번째 인자인 콜백함수를 실행한다.
  (즉, 새롭게 컴포넌트가 렌더링 되었을 때 실행된다.)

• 만약 조건부로 useEffect를 실행하고자 한다면, 두번에 인자로 배열을 넣는다.

• 이 배열의 이름은 dependency array라고 부르며, 이 배열 내부의 담긴 변수의 값이 변경될 때 useEffect가 실행되어 첫 번째 인자인 함수가 실행된다.
  😺 두 번째 인자로 빈 배열을 넣는다면, 처음 컴포넌트가 생성되었을 때 단 한번만 useEffect가 실행된다.

let [name, setName] = useState("");
// ~ setName을 활용해 name을 변경 ~
useEffect(() => {
	document.title = name;
}, [name]);
// name 변수가 수정될 때 마다 실행되어 html의 title을 변경한다.

반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안된다. 최상위(top level)에서만 호출해야 한다. custom hook이나 react 함수 컴포넌트에서만 hook을 호출해야 한다.