[React] useEffect Hook

useEffect( 훅을 활용해 다양한 Side Effect (부수효과) 를 일으킬 수 있다.
React에서 일어나는 UI Rendering 과 Side Effect 의 차이를 구분하여 설명할 수 있다.
useEffect Hook 을 활용해 원하는 타이밍 (의존성 배열) 에 Side Effect 를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다,

1-1. Rendering in React

(state + props) => UI

1-2. ✔️ Side Effect

• 함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect 가 있다고 표현한다.
  => 프로그래밍 측면에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 다른 동작을 하는 것
  

• component 에서 side effect 를 쓰고 싶을 때 사용하는 Hook = useEffect()
• useEffect(( )=> { }, [ ]);
  ex) useEffect (effect, dependency array)

let count = 0

function greetWithSideEffect (name) {       // Input
	count = count + 1				// Side Effect
    
    return `${name} 님 안녕하세요!`  			// Output
}

greetWithSideEffect 라는 함수는 이름을 받아 인삿말을 리턴하는 함수다.
하지만 이 함수는 단순히 input 과 output 만 존재하는 함수가 아니다. 실행하는 중간에 함수 외부 세계에 있는 count 라는 변수를 조작한다. 이는 함수의 결과값 이외의 다른 상태를 변경시키는 행위에 해당하므로, Side Effect 가 존재한다 라고 볼 수 있다.

• console.log() 또한 Side Effect 이다.
• output 을 만들어내는 과정이더라도, 외부에 있는 값을 가져와서 읽어서 다른 값을 만든다면 Side Effect

let num = 3

function printNum (number) {
	const result = num + number;     // Side Effect
    
    return result;
}

printNum(3)

1-3. useEffect()

• blocing rendering (렌더링을 막는다) 을 해결
• useEffect 는 UI 가 먼저 해결된 뒤, 실행된다.
• 특정 값이 랜더링 되어야 할 때, useEffect(() => {}, []) {}, [] 배열 안에 값이 들어가 상태를 바꿔줘야 할 때 랜더링 시켜준다.

	console.log("mount");
    
    }, [] );

• 빈 배열을 갖고 있기 때문에 (상태가 바뀌지 않기 때문에) re-rendering 되지 않고 첫 렌더링만 실행된다.

useEffect 안에서 clear 하는 방법

useEffect(() => {
	const intervalId = setInterval (moveNextSlide, 2000);
    return () => {
    clearInterval(intervalId);
}
)