[React] useEffect

useEffect란?

useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello.");
  });

• 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook.
• ex) 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶다면? 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면?

useEffect의 흐름

1. input에 값 입력.
2. value, 즉 state가 변경됨.
3. state가 변경되었기 때문에 컴포넌트 리렌더링.
4. 리렌더링 되었기 때문에 useEffect 재실행됨.
5. 1→5번 과정 순환

의존성 배열

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

• 의존성 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect 실행.
• 빈 배열이면 초기 한 번 실행됨.

clean up

useEffect(()=>{
		// 화면에 컴포넌트가 나타났을 때 (mount) 실행하고자 하는 함수.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을 때 (unmount) 실행하고자 하는 함수.
		}
	}, [])

• 컴포넌트가 사라졌을 때 무언가를 실행하고 싶을 때 사용.