JS 리액트 useEffect

useEffect

1. 빈 배열이 없으면 useEffect 안에 있는 로직은 매번 리랜더링
2. 빈 배열이 있으면 useEffect 안에 있는 로직은 한 번만 실행
3. 배열에 값이 있다면 배열 값이 바뀔 때 리랜더링.

빈 배열은 []이걸 뜻한다. 예시 코드를 보면

let AppCallCount = 0;

const App = () => {
  AppCallCount++;
	console.log(`App1 : ${AppCallCount} 번 실행`);
	
	const inputNameRef = useRef(null);
	const inputAgeRef = useRef(null);
	const [num, setNum] = useState(0);
	
	// setTimeout(() => inputNameRef.current.focus(), 1000);
	
	useEffect(() => {
		inputNameRef.current.focus();
	},[]);
	
	return (
		<>
			<input ref={inputNameRef} type="text" placeholder="이름"/>
			<hr/>
			<input ref={inputAgeRef} type="number" placeholder="나이"/>
			<hr/>
			<button onClick={() => {
					setNum(num + 1);
					inputAgeRef.current.focus();
				}}>증가 : {num}</button>
		</>
	);
	
};

ReactDOM.render(<App />, document.getElementById("root"));

여기서 focus();로 직관적으로 확인할 수 있다.

	useEffect(() => {
		inputNameRef.current.focus();
	},[]);

우선 이부분. 그리고

			<button onClick={() => {
					setNum(num + 1);
					inputAgeRef.current.focus();
				}}>증가 : {num}</button>

여기에 focus();가 존재한다.

그럼 증가버튼을 누르면 나이로 포커스 될 것이고 맨 처음 접속완료됐을 때는 이름으로 포커스 될 것이다.

왜? useEffect의 두번째 규칙, 2. 빈 배열이 있으면 useEffect 안에 있는 로직은 한 번만 실행 때문.

직접어떻게 되는지 보면 이해가 쉬울 것이다.

그럼 만약에 빈 배열 []이 없다면 어떻게 될까?

첫번째 규칙, 1. 빈 배열이 없으면 useEffect 안에 있는 로직은 매번 리랜더링, 에 의해서 증가버튼을 누르면 나이로 포커스했다가 곧바로 이름으로 다시 포커스 될 것이다. 직접 두개를 비교하면서 해보면 된다.

이제 이 둘을 이해했다면 세번째 규칙으로 넘어가면 된다.

	useEffect(() => {
		console.log('effect 1 : 최초에 한번만 실행');
	},[]); // props : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용하는 속성
	
	useEffect(() => {
		console.log('effect 2 : 부모의 appNum가 바뀔때마다 실행');
	},[appNum]);
	
	useEffect(() => {
		console.log('effect 3 : 나(Sub) num가 바뀔때마다 실행');
	},[num]);
	
	useEffect(() => {
		console.log('effect 4 : appNum 혹은 num가 바뀔때마다 실행');
	},[appNum,num]);
	
	useEffect(() => {
		console.log('effect 5 : 매번 실행');
	});

이번엔 콘솔로그가 어떻게 찍히는가 확인하면 된다.

언제 실행되는가? 면 세변째 규칙, 3. 배열에 값이 있다면 배열 값이 바뀔 때 리랜더링. 에 의해서 어떤 값이 바뀌느냐에 따라 콘솔에 찍히는게 다를 것이다.

그래서 useEffet를 사용하면 조금 더 세밀하게 무언가를 실행하는 로직을 짤 수 있다는 것.

의존성 배열을 활용해서 실행 민감도를 조절할 수 있다가 핵심이 되겠다.