useState, useEffect 동작 퀴즈 2

Q) 다음 콘솔에 출력되는 값은?

import { useEffect } from "react";
import { useState } from "react";
export default function App() {
const [state, setState] = useState(0);

console.log("state : " + state);

useEffect(() => {
setState(1);
return () => {
console.log("state : " + state);
}
}, [state]);

return <div className="App">App<div>;
}

문제 설명

• useState와 useEffect의 동작 순서, 동작 방식을 알고 있는지?
• 리액트 라이프사이클
• useEffect의 cleanUp 함수
• Cleanup 함수의 트리거 시점을 알고있는가! 문제입니다

---

문제

import { useEffect } from "react";
import { useState } from "react";
export default function App() {
const [state, setState] = useState(0);

console.log("state : " + state);

useEffect(() => {
setState(1);
return () => {
console.log("state : " + state);
}
}, [state]);

return <div className="App">App<div>;
}

해답

state : 0
state : 1
state : 0
state : 1

해설

• useState가 비동기적으로 일어남을 아는가
• 실행 순서
• 첫번째 렌더링

1. 최초 렌더링 시에 함수가 실행된다.
2. useState(0) 실행되고 실행 결과로 state에는 0이 반환된다.

• 초기값이 세팅됨

3. state : 0 출력
4. useEffect로 함수가 전달된다.

• 함수의 실행이 아닌 함수 선언의 전달
• useEffect는 렌더링 이후에 실행됨

5. 렌더링 끝나고 useEffect에 전달한 함수가 실행된다.

• 전 값은 undefined고 후 값은 0
• 두 값이 달라서 상태가 변경됐으니 실행

6. cleanUp 함수 없어서 실행할거 없음
7. setState(1) 실행됨
8. 실행 반환값으로 cleanUp 함수 반환된거 등록

• return () => { console.log("state : " + 0); }
• 두번쨰 렌더링

1. 상태값 변경으로 리렌더링 발생
2. useState(0) 실행되고 실행 결과로 state에는 1이 반환된다.

• 이 1은 바뀔 값
• 내부 상태값은 아직 0
• 아닐수도 있다!

3. state : 1 출력
4. useEffect로 함수가 전달된다.

• () => { setState(1); } 전달

5. 렌더링 끝나고 useEffect에 전달한 함수가 실행된다.

• 전 값은 0, 후 값은 1
• 상태 변경 발생

6. cleanUp 함수 실행

• 그 전에 등록한거
• return () => { console.log("state : " + 0); }
• state : 0 출력

7. setState(1) 실행
8. 실행 반환값으로 cleanUp 함수 반환된거 등록

• return () => { console.log("state : " + 1); }

9. 아직 실제 state는 1이 아닌 상태로 리렌더링이 발생

• 세번째 렌더링

1. useState(0) 실행되고 실행 결과로 state에는 1이 반환된다.
2. state : 1 출력
3. useEffect로 함수가 전달된다.
4. 렌더링 끝나고 useEffect에 전달한 함수가 실행 안된다.

• 의존성 배열 보고 실행 판단
• 1이고 1이기 때문에 안바꼈네? 실행안함
• 상태가 1인데 1로 바꿨기 때문에 변화가 없다고 판단. 리렌더링 발생하지 않음.

첨언

• cleanUp 함수는 useEffect 함수 실행 전에 먼저 실행하는 함수궁금한거
• #질문 cleanUp이 여러개면?
• 같은 의존성 배열에 useEffect를 두개 쓰면
• cleanUp 함수 둘다 실행되고 실행되는지 아니면
• cleanUp - useEffect - cleanUp - useEffect 인지?
• #질문 state 값이 1로 반환됐는데 왜 내부 값은 아직 1이 아닐까?
• 그런건 알겠는데 왜 그런가?
• 이걸 상태와 상태 사이의 임시 상태
• #질문 setState를 호출하면 같은 값인지 내부적으로 체크 하나?
• 바깥에 setState를 두고
• useEffect에는 로그랑 cleanUp 함수 넣으면?
• 어떻게 동작하나?
• #질문 useEffect 실행 순서는?
• 상식적으로는 등록 순서대로