⭐️ 추가로 공부할 내용

• Clean Up Effect: setInterval과 그것을 초기화하는 ClearInterval까지 이해한 상태 (20230909)

Side Effect

• 예를 들어, 단순하게 input 받아 output 내는 함수는 Side Effect가 없는 순수 함수라고 함
• 그러나 외부의 값을 읽어오거나 외부의 값을 변경한다면 그 함수는 Side Effect가 있는 함수

// 순수 함수: Side Effect가 없는 상태입니다. 
const sumNums = (x, y) => {
	return x + y;
}

// sumNums 함수가 num 변수를 참조하고 있기 때문에 Side Effect가 있습니다.
const num = 1;

const sumNums = (x) => {
	return x * num;
}

// sumNums 함수가 num 변수의 값을 주고 있기 때문에 Side Effect가 있습니다.
let num;

const sumNums = (x) => {
	num = x + 1;
}

// 이 셋의 예시 외에도 console.log(), DOM 조작 등도 Side Effect가 발생한다고 합니다.

React에서의 Side Effect

• 함수 컴포너트는 props와 state라는 input을 통해 JSX를 만들어낸 함수
• React에서의 Side Effect 사례
  1) Data Fetching: 백엔드 APi와의 데이터 통신
  2) DOM 접근 및 조작
  3) 구독(Subscribe)

useEfffect

• 렌더링 과정에서 Side Effect 발생 시 야기되는 문제
  1) 렌더링 블록
  2) 매 렌더링 시 Side Effect 실행
• 따라서 useEffect hook을 사용하여 Side Effect를 제어해야 함

import { useEffect } from 'react';

const Login = () =>{
	// 첫 번째 인자로 들어간 함수는 모든 렌더링이 완료된 후 호출됩니다. 이 같은 경우에는 매 렌더링마다 함수가 호출됩니다. 
	useEffect(함수)

	return (
		...
	)
}

import { useEffect } from 'react';

const Login = () =>{
	// 두 번째 인자로 들어간 의존성 배열은 Side Effect 발생 여부를 결정짓는 조건입니다. 
	useEffect(함수, [의존성 배열])

	// 이 예시에서의 콘솔은 첫 렌더링이 끝난 후에 출력됩니다. 그리고 이후에는 color 값이 했을 때 출력됩니다. 이렇게 변경된 값을 의존성 배열에 담는 것을 '구독'한다고 합니다.
	useEffect(() => {
		console.log("색상이 바뀌었네요!")
	}, [color])

	return (
		...
	)
}

Rendering & useEffect Cycle

1) 컴포넌트 렌더링(mount)
2) useEffect hook의 첫 번째 인자인 함수 호출(Side Effect)
3) 컴포넌트의 state 또는 props 변경 시 리렌더링 발생(update)
4) useEffect hook의 두 번째 인자인 의존성 배열 확인
1) 구독한 값이 변경되었다면 첫 번째 인자인 함수 호출(Side Effect)
5) 컴포넌트가 불필요한 경우에 화면에서 지움(unmount)